【发布时间】：2021-03-12 03:06:44
【问题描述】：
我需要能够将文本和特定字体转换为 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---
这是一次尝试...运行这个 sn-p 会导致我的浏览器崩溃，但在它自己的文件中可以正常工作。
这是结果和代码：
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>---opentype.js---
这个不能在 SO 上运行，但它在我正在编程的网站上的控制台上运行良好。
这是结果和代码：
svgD = "";
font = await opentype.load("https://staging-gumcreekboards.temp312.kinsta.cloud/wp-content/themes/Divi-child/CanvEsIntegration/static/CreekWareFonts/woff/ARRUS BT BOLD.ttf");
pathsArray = font.getPaths("Shane", 0, 0, 72);
svgDArray = [];
svgPaths = "";
for (var i = 0; i < pathsArray.length; i++)
{
svgDArray = [];
svgD = "";
path = pathsArray[i].commands;
for (var j = 0; j < path.length; j++)
{
for (each in path[j])
{
svgDArray.push(path[j][each])
}
svgD += svgDArray.join(" ") + " ";
}
if (svgD.length > 0)
{
svgPaths += "<path fill='black' d='" + svgD + "' />";
}
};
document.getElementById("svgcontainer").innerHTML = "<?xml version='1.0' encoding='UTF-8' standalone='no'?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3/org/1999/xlink' version='1.1' width='665' height='554' viewBox='0 0 665 554' xml:space='preserve'><style>path {stroke: red; stroke-width: 1px; stroke-linejoin: 'round'; fill: black;}</style><g transform='matrix(0.95 0 0 0.95 300 275)'>" + svgPaths + "</g></svg>";<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
</head>
<body>
<div id="svgcontainer">
</div>
</body>
</html>【问题讨论】：
-
现在是凌晨 1:30，所以如果有人回复我会在早上回复您
标签： javascript php svg opentype maker-js