Question

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

关键是，我无法重绘整个图层，因为它花费了很多时间（约300个形状）。出于这个原因，我改变了一些代码，只是绘制形状。

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

var stage = new Kinetic.Stage（{ 容器：'容器'，宽度：578，身高：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（）通过不重绘热门画布来节省重绘时间。

KineticJS形状不透明

1 个答案: