Javascript KineticJS形状不透明度

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

关键是，我不能重新绘制整个图层，因为它需要很多时间（~300个形状）。出于这个原因，我修改了一些代码，只是画了形状

jsFiddle： （参见HTML的第25行和第30行）

var阶段=新的动力学阶段({ 容器：'容器'， 宽度：578， 身高：200 }); var layer=新的动能层（）

（代码基于此：）

即使我在左侧将形状的不透明度设置为0.0，它仍然可以看到。每次悬停时，它都变得越来越明显（我猜形状会被重新绘制）

是否有任何方法（重新）绘制不透明度为0.0的形状，而不绘制整个舞台和/或层

---

提前感谢。

是的，快速查看表明node.draw（）可能在5.0.1中被破坏

解决办法：

• 返回到版本4.4.0

• 使用layer.drawsecene（），它通过不重画命中画布来节省重画时间

---

谢谢您的重播。我尝试了layer.drawsecene（），事实上它比只使用layer.draw（）效果更好。正如您所提到的，4.4.0版似乎工作正常，但返回到该版本是没有选择的：/。当您使用node.draw（）时，它将绘制在现有图片上。（不清除现有状态，因为这是不可能的）如果节点下没有其他元素，可以使用

layer.clear

方法。如果您有性能问题，请注意：大多数导入都是层和缓存。@lavrton，更新：Eric说node.draw已被删除。然而，当在V4.4中引入node.draw时，它清除了现有的节点（没有透支）——因此，User322838的不透明度更改在4.4下工作。根据OP的设计要求，您建议使用多个图层来降低重画成本，这听起来不错。缓存对于非常复杂的形状非常有用。缓存对于静态且不必生成事件的多个形状非常有用。正如我所说的“字里行间”，我不认为缓存在这里有用。谢谢你的回答。我尝试了你的建议，使用多个图层来减少图层。绘制[场景]（）时间。工作非常好！现在我在一个图层上添加了30个矩形，而不是在一个图层上添加大约300个矩形。它工作速度非常快，即使在旧电脑上也是如此@马克：你似乎很擅长“字里行间的阅读”：D.我不使用复杂的形状（简单的矩形），我需要处理每个形状上的事件。所以，缓存似乎没有什么用处。总之，正如我所说的，多层很好用。再次感谢你们两位的帮助：）！

  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);