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

时间:2018-06-13 12:23:21

标签: javascript p5.js

正如标题所示,我试图在常规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();
}

我将如何做到这一点?

1 个答案:

答案 0 :(得分:0)

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