KineticJS形状不透明度

Question

我需要一些帮助，使用KineticJS（5.0.0。）更改形状的不透明度。 在鼠标事件中，我想更改触发事件的形状的不透明度。 只要将形状悬停，形状就会变得可见（不透明度1.0），而将其保留时就变得不可见（不透明度0.0）。 每当我重新绘制指定形状的整个图层时，它都可以正常工作。

关键是，我无法重绘整个图层，因为这需要花费很多时间（〜300个形状）。 因此，我更改了一些代码以仅绘制形状。

jsFiddle： http : //jsfiddle.net/p39uH/2/ （请参见HTML的第25和30行）

var stage = new Kinetic.Stage（{container：'container'，width：578，height：200}）; var layer = new Kinetic.Layer（）;

  var pentagon = new Kinetic.RegularPolygon({ x: stage.width()/2, y: stage.height()/2, sides: 5, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4, opacity: 0.1 }); pentagon.on('mouseover', function() { this.opacity(0.3); this.draw(); // instead of layer.draw(); }); pentagon.on('mouseout', function() { this.opacity(0.0); this.draw(); // instead of layer.draw(); }); // add the shape to the layer layer.add(pentagon); // add the layer to the stage stage.add(layer); 

（代码基于此： http : //www.html5canvastutorials.com/kineticjs/html5-canvas-set-alpha-with-kineticjs/ ）

即使我将形状的不透明度设置为0.0，但仍可以看到。 每次将其悬停时，它就会变得越来越可见（我想形状会被重绘）。

有没有办法在不绘制整个舞台和/或图层的情况下（重新）绘制不透明度为0.0的形状？

提前致谢。

Answer 1

是的，快速浏览表明node.draw（）在5.0.1中可能已损坏。

解决方法：

• 放回版本4.4.0

• 使用layer.drawScene（）可以通过不重绘命中画布来节省重绘时间。