尝试在常规 js 中模拟 p5.js fontToPoints 方法答案

【问题标题】：Trying to simulate p5.js fontToPoints method in regular js尝试在常规 js 中模拟 p5.js fontToPoints 方法
【发布时间】：2018-06-13 12:23:20
【问题描述】：

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

我该怎么做呢？

【问题讨论】：

看起来像：stackoverflow.com/questions/12700731/…
类似，非常相似，但不是我要找的。我只想要文本的轮廓，这似乎没有勾勒出文本的轮廓，但更多的是用圆圈填充它。如，它相当笨重......
为什么不想使用 P5.js？你在哪里看到fontToPoints() 函数？
在控制台中运行这个p5.Font.prototype.textToPoints.toString()并复制他们的研究它，然后实现你自己的。

标签： javascript p5.js

【解决方案1】：

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

【讨论】：