试图在常规js中模拟p5.js fontToPoints方法

Question

正如标题所示，我试图在常规JavaScript中模拟p5.js fontToPoints方法，因为我不想使用他们的库。

我不知道我怎么能开始这样做，我已经创建了一个画布，并在画布上显示文字，但是我希望能够获得围绕画布勾勒出文字的点，而我希望在数组中。但是，没有任何线索......

我正在寻找的一个例子......

textToFont example for 'train'

我当前的代码尝试只是概述了文本......

function setCanvas() {
let windowWidth = $(window).width();
let windowHeight = $(window).height()

let title = document.getElementById("title").innerText;

canvas.width = windowWidth;
canvas.height = windowHeight * 0.3;

ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';

ctx.textAlign = "center";
ctx.font = "100px Montserrat";
ctx.strokeText(title, canvas.width/2, canvas.height/2);

ctx.fill();
ctx.stroke();
}

我将如何做到这一点？

Answer 1

textToPoints：您需要导入'opentype.js'库，然后对于每个字符，从opentype字体获取字形，从字形获取路径，从路径获取命令列表，然后模拟遍历沿着路径的每个部分并具有给定的点间距。