Как нарисовать произвольную кривую в createJS? - PullRequest
Новая
       15

Как нарисовать произвольную кривую в createJS?

0 голосов
/ 05 ноября 2018

Я пытаюсь написать функцию, используя createJS, чтобы нарисовать произвольную функцию, и у меня возникли некоторые проблемы. Я родом из d3, поэтому у меня проблемы с выходом из менталитета привязки данных.

Предположим, у меня есть 2 массива xData = [-10, -9, ... 10] и yData = Gaussian(xData), которые являются псевдокодом для отображения каждого элемента xData на его значение на кривой колокола. Как теперь я могу нарисовать yData как функцию xData?

Спасибо

1 Ответ

0 голосов
/ 06 ноября 2018

Чтобы отобразить произвольную функцию в 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);
}

Это должно получить базовую версию функции рисования! Обратите внимание, что линия будет довольно неровной, если у вас мало точек данных, и вам придется обработать (нормализовать) свои данные, чтобы они поместились на вашем экране. Например, если вы начнете с -10 для X, то это будет за пределами экрана слева на 10 пикселей - и если он будет работать только от -10 до +10, весь ваш график будет сжат только до 20 пикселей ширины.

У меня есть кодовая ручка, показывающая этот подход к графике здесь . Он сопоставлен с каждым пикселем в области просмотра и вычисляет для него значение Y, а не ваш случай, когда у вас есть входные значения X. И к вашему сведению, код для построения графиков находится внутри функции «run» вверху - все в классе PerlinNoiseMachine полностью связано с генерацией данных, поэтому вы можете игнорировать его для целей этого вопроса.

Надеюсь, это поможет! Если у вас есть какие-либо дополнительные вопросы или примеры кода, пожалуйста, исправьте ваш вопрос.

...