KineticJS, могу ли я просто перерисовать одну фигуру? (рисунок на холсте)

В KineticJS я хотел бы добавить фигуру к слою и перерисовать только последнюю добавленную фигуру, а не все фигуры в этом слое. Это возможно? Или, может быть, какой-то обходной путь?

(функция .draw() перерисовывает все дочерние узлы слоя)

Подробнее о моей ситуации:

У меня есть слой, на котором я хочу нарисовать линию, которая отслеживает движение фигуры по экрану во время анимации.

       //create my shapes first
       var myShape = new Kinetic.Circle({config});
       //myShape gets its own layer, shapeLayer
       var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY()});
       //traceLine gets its own layer, traceLayer

Во время анимации я выполняю этот код для обновления и перерисовки линии:

       //during animation loop
       var points = traceLine.getPoints();
       points.push({x: myShape.getX() , y: myShape.getY()});
       traceLine.setPoints(points);   // this is currently the most efficient method I can think of
       traceLayer.draw();  // redraw the line
       shapeLayer.draw(); // the shape gets redrawn as well

Это хорошо работает на короткое время, но со временем я получаю большой массив точек, и время перерисовки линии становится больше.

Что я хотел бы сделать, так это нарисовать новую линию на слое во время каждого цикла анимации, сделав ее сегментированной. Вот так:

       var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY(), x: myShape.getX()+1, y: myShape.getY()+1}); // draw as a point
       traceLayer.add(traceLine);
       traceLayer.draw();  //this slows it down as all lines get redrawn.

Но функция .draw() перерисовывает все дочерние узлы слоя, что ничуть не эффективнее и не быстрее.

Извините, я не добавил jsfiddle, потому что мой код очень длинный, но если вам нужна дополнительная информация, просто дайте мне знать.


javascript canvas animation kineticjs
person SoluableNonagon    schedule 19.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот вопрос был связан с идеей не стирать какие-либо предыдущие объекты на экране, но и не хотеть перерисовывать какие-либо из них, в основном просто рисовать один новый элемент и показывать слой. Я решил это, просто нарисовав прямо на слой.

 var traceLayerDraw = traceLayer.getCanvas();
 var context = traceLayerDraw.getContext('2d'); 
 context.beginPath();
 context.moveTo(xBefore, yBefore);
 context.lineTo(newX, newY);
 context.stroke();

Поэтому я просто взял слой и нарисовал на нем, используя значения до и после объекта, который я хочу нарисовать в новом месте.

Мне также пришлось установить для слоя значение «clearBeforDraw: false» в качестве атрибута слоя.

person SoluableNonagon    schedule 21.01.2013