首页猿问 opentype.js...

opentype.js 和maker.js 呈现错误的文本路径

JavaScript

拉莫斯之舞 2023-09-21 10:41:56

我需要能够将文本和特定字体转换为 svg 路径数据，并且碰巧遇到了 opentype.js 和maker.js，彼此独立，看到maker.js 使用opentype.js。当我单独使用 opentype.js 时，它无法正确渲染字体路径...当我给它填充时，它无法正确显示。当我使用maker.js时，它明显更好，但仍然不正确。要绝对清楚问题描述：我需要一种方法将具有给定字体的文本转换为 svg 路径数据，然后将其“扁平化”（任何黑色重叠都会被合并，并且合并文本内的任何白色元素都会被合并）保留 - 例如看字母“P”...如果我联合它，它会删除“P”内部的白色部分，这是我需要的）。此时我不关心方法...它只需要与 php 兼容（它不能使用 imagemagick 或从终端运行的其他第 3 方软件 - 例如 inkscape...我无权访问运行 shell_exec() 或 exec()) 或 javascript我有过很多失败的尝试，所以...非常感谢帮助！---maker.js---这是一次尝试...运行此代码片段会导致我的浏览器崩溃，但在其自己的文件中工作正常。这是结果和代码：window.onload = function(){ var makerjs = require('makerjs'); var url = 'https://staging-gumcreekboards.temp312.kinsta.cloud/wp-content/themes/Divi-child/CanvEsIntegration/static/CreekWareFonts/woff/work_in_progress-updated.woff'; var text = 'Shane'; var size = 72; var union = true; var bezierAccuracy = 0; var svg = document.createElement('div'); opentype.load(url, (err, font) => { textModel = new makerjs.models.Text(font, text, size, union, true, bezierAccuracy); //console.log(textModel.models, makerjs.model.simplify); svg.innerHTML = makerjs.exporter.toSVG((textModel)); document.getElementById('svgcontainer').innerHTML = svg.innerHTML; });};<html><head> <script src="https://cdn.jsdelivr.net/npm/makerjs@0/target/js/browser.maker.js"></script> <script src="https://cdn.jsdelivr.net/npm/bezier-js@2/bezier.js"></script> <script src="https://cdn.jsdelivr.net/npm/opentype.js@0/dist/opentype.js"></script></head><body><style>path {stroke: red; stroke-width: 1px; stroke-linejoin: round; fill: black !important;}</style><div id="svgcontainer"></div></body></html>

查看完整描述

1 回答

德玛西亚99

TA贡献1770条经验获得超3个赞

罪魁祸首是错误的字体定义。在字体锻造，角色a显示为具有相交的路径。如果您查看该字形的 opentype.js 的路径数据输出，它看起来像这样（为了方便阅读而格式化）：

M 127.872 27.864 L 128.088 27.864 L 128.304 27.864 Z

M 147.240 48.240

C 143.568 54.288 133.200 71.856 128.736 71.856

C 127.800 71.856 126.432 70.992 126.432 67.896

C 126.432 59.472 135.504 48.960 135.504 44.496

C 135.504 39.744 132.984 39.168 131.760 39.168

C 130.680 35.856 127.152 36.432 127.152 37.080

C 127.152 37.944 129.816 37.440 129.816 41.112

C 129.816 44.352 126.504 49.680 123.696 55.152

C 121.392 58.608 113.040 70.848 108.504 70.848

C 94.176 70.848 120.168 32.472 132.120 32.472

C 135.144 32.472 134.208 34.488 136.152 34.488

C 137.880 34.488 136.368 30.312 134.208 30.312

C 130.896 30.312 131.256 27.936 128.088 27.864

C 115.704 28.152 97.056 51.912 97.056 59.040

C 97.056 64.872 101.304 66.096 101.304 66.096

C 101.304 66.096 102.024 74.016 108.216 74.016

C 111.744 74.016 116.496 70.200 120.024 66.888

C 120.312 70.632 123.264 71.424 123.264 71.424

C 123.264 71.424 123.048 75.312 127.584 75.312

C 134.928 75.312 145.872 55.728 149.688 49.248

C 150.768 47.520 148.464 46.440 147.240 48.240Z

第一条线表示从一个点到第二个点然后返回的闭合线。它与以下路径的一部分重合，并以某种方式导致maker.js 处理中出现错误。

我已经拆开您的脚本以获取每个字形的基础数据，然后修补a第一行缩短的字母的路径数据。

var makerjs = require('makerjs');

var opentype = require('opentype.js');

// does this really work with a https: url?

// I had to download the font first.

var url = './work_in_progress.woff';

var text = 'Shane';

var size = 72;

var union = true;

var bezierAccuracy = 0;

var decimalPlaces = 3;

var patch = 'M147.240 48.240C143.568 54.288 133.200 71.856 128.736 71.856C127.800 71.856 126.432 70.992 126.432 67.896C126.432 59.472 135.504 48.960 135.504 44.496C135.504 39.744 132.984 39.168 131.760 39.168C130.680 35.856 127.152 36.432 127.152 37.080C127.152 37.944 129.816 37.440 129.816 41.112C129.816 44.352 126.504 49.680 123.696 55.152C121.392 58.608 113.040 70.848 108.504 70.848C94.176 70.848 120.168 32.472 132.120 32.472C135.144 32.472 134.208 34.488 136.152 34.488C137.880 34.488 136.368 30.312 134.208 30.312C130.896 30.312 131.256 27.936 128.088 27.864C115.704 28.152 97.056 51.912 97.056 59.040C97.056 64.872 101.304 66.096 101.304 66.096C101.304 66.096 102.024 74.016 108.216 74.016C111.744 74.016 116.496 70.200 120.024 66.888C120.312 70.632 123.264 71.424 123.264 71.424C123.264 71.424 123.048 75.312 127.584 75.312C134.928 75.312 145.872 55.728 149.688 49.248C150.768 47.520 148.464 46.440 147.240 48.240Z'

var advance = 0;

opentype.load(url, function (err, font) {

var pathData = font.stringToGlyphs(text).map((glyph, i) => {

var data = glyph.name === 'a' ? patch : glyph.getPath(advance, size, size).toPathData(decimalPlaces);

advance += glyph.advanceWidth / font.unitsPerEm * size;

return data;

});

var model = makerjs.importer.fromSVGPathData(pathData.shift());

while (pathData.length) {

model = makerjs.model.combineUnion(model, makerjs.importer.fromSVGPathData(pathData.shift()));

}

console.log(makerjs.exporter.toSVG(model))

});

结果是一个无错误的 SVG：

</g>

</svg>

反对回复 2023-09-21

1 回答
0 关注
104 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

opentype.js 和maker.js 呈现错误的文本路径

opentype.js 和maker.js 呈现错误的文本路径

1 回答

添加回答