KineticJS，我能重新绘制一个形状？ （在画布上绘制）

问题描述

在KineticJS，我想一个形状添加到一个层，只有重绘最近添加的形状，而不是该层所有形状。这可能吗？或者一些workaroud？

In KineticJS, I would like to add a shape to a layer, and only redraw the most recently added shape, rather than all shapes in that layer. Is this possible? Or maybe some workaroud?

（Draw（）函数重绘层上的所有子节点）

(.draw() function redraws all the child nodes on the layer)

这是我的情况的更多细节：

More details on my situation:

我有哪些我想提请其动画期间痕迹在屏幕的形状移动的线层。

I have a layer on which I want to draw a line which traces the movement of an shape across the screen during animation.

       //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

在我的动画执行此code更新和重绘行：

During animation I execute this code to update and redraw the line:

       //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

这非常适用于很短的一段时间，但随着时间的推移，我得到一个大阵点，并重新绘制线时间越来越长。

This works well for a short while, but as time goes on I am getting a large array of points and the time to redraw the line is getting longer.

我希望做的就是绘制新线到层动画的每一个循环过程，使之分割。像这样：

What I would like to do is draw a new line onto the layer during each loop of the animation, making it segmented. Like so:

       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（）函数重新绘制层，它没有任何更有效或更快。

But the .draw() function redraws all the child nodes on the layer, which is not any more efficient or faster.

对不起，我没有竖起的jsfiddle，因为我的code是很长，但如果你需要更多的细节只是让我知道。

Sorry I didn't put up a jsfiddle, cause my code is very long, but if you need more details just let me know.

推荐答案

这个问题涉及不想抹去屏幕上的任何previous对象，但不想重绘他们任何的想法，基本上只是抓一张新的项目，并显示该层。我只需直接绘制到层解决了这个。

This question was related to the idea of not wanting to erase any previous objects on the screen, but not wanting to redraw any of them, basically to just draw one new item and show the layer. I solved this by just drawing directly onto the layer.

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

所以我只是把该层，并提请之前使用上和对象的值后，我想在新的位置绘制。

So I just took the layer and drew onto it using before and after values of the object I want to draw in a new location.

我确实有还设置了一层。clearBeforDraw：假作为该层的属性。

I did have to also set the layer to 'clearBeforDraw: false' as an attribute of the layer.

这篇关于KineticJS，我能重新绘制一个形状？ （在画布上绘制）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！