如何在 createJS 中绘制任意曲线

Question

我正在尝试使用 createJS 编写函数来绘制任意函数，但我遇到了一些问题。我来自 d3 背景，所以我很难摆脱数据绑定的心态。

假设我有 2 个数组 xData = [-10, -9, ... 10] 和 yData = Gaussian(xData)，这是用于将 xData 的每个元素映射到其在钟形曲线上的值的伪代码。我现在如何将 yData 绘制为 xData 的函数？

谢谢

Answer 1

要在 CreateJS 中绘制任意函数的图形，您需要绘制连接所有数据点的线。因为，嗯，这就是绘图！

最简单的方法是使用 for 循环遍历每个数据点，并为每个点调用 lineTo()。因为 canvas 绘图 API 从你最后 'left off' 开始一行，你实际上甚至不需要为每一行指定行开始，但你必须移动 canvas 'pen' 到开始绘图之前的第一个点。类似于：

// first make our shape to draw into. 
let graph = new createjs.Shape();
let g = graph.graphics
g.beginStroke("#000");

xStart = xData[0];
yStart = yourFunction(xData[0]);
g.moveTo(xStart, yStart);

for( let i = 1; i < xData.length; i++){
      nextX = xData[i], but normalized to fit on your graph area;
      nextY = yourFunction(xData[i]), but similarly normalized;
      g.lineTo(nextX, nextY);
}

这应该得到一个基础版的功能图！请注意，如果您没有很多数据点，那么这条线将会非常参差不齐，并且您必须处理（规范化）数据以使其适合您的屏幕。例如，如果 X 从 -10 开始，它会向左离开屏幕 10 个像素 - 如果它仅从 -10 到 +10 运行，则整个图形将被压缩成只有 20 个像素的宽度。

我有一个 codepen 展示了这种绘图方法 here。不过，它被映射为命中视口上的每个像素并为其计算 Y 值，而不是输入 X 值的情况。仅供参考，绘图代码都在顶部的 'run' 函数内 - PerlinNoiseMachine class 中的所有内容都是关于数据生成的，因此出于这个问题的目的，您可以忽略它。

希望对您有所帮助！如果您有任何具体的后续问题或代码示例，请修改您的问题。

如何在 createJS 中绘制任意曲线

How would one draw an arbitrary curve in createJS

createjs