时间戳

首页 > 解决方案 > 如何在 createJS 中绘制任意曲线

createjs - 如何在 createJS 中绘制任意曲线

问题描述

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

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

谢谢

标签： createjs

解决方案

要在 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 显示了这种绘图方法。它被映射为命中视口上的每个像素并为其计算 Y 值，而不是您输入 X 值的情况。仅供参考，图形代码都在顶部的“运行”函数中 - PerlinNoiseMachine 类中的所有内容都与数据生成有关，因此出于本问题的目的，您可以忽略它。

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

推荐阅读