Question

我正在尝试使用createJS编写函数来绘制任意函数，但遇到了一些麻烦。我来自d3背景，因此无法摆脱数据绑定的思想。

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

谢谢

Answer 1

要在CreateJS中绘制任意函数的图形，请绘制连接所有数据点的线。因为，那就是图形化！

最简单的方法是for循环遍历每个数据点，并为每个数据点调用lineTo()。因为画布绘制API在最后一个“停下来”的地方开始了一条线，所以实际上甚至不需要为每条线指定行的开始，但是您必须在开始之前将画布“笔”移到第一点画画。像这样：

// 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值的情况。仅供参考，绘图的代码都在顶部的“运行”功能内-PerlinNoiseMachine类中的所有内容都与数据生成有关，因此出于这个问题的目的，您可以忽略它。

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

如何在createJS中绘制任意曲线

1 个答案: