KineticJS形状不透明

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

问题是，我无法重新绘制整个图层，因为需要很长时间（〜300个图形）。出于这个原因，我改变了一些代码，只是绘制形状。

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

变种阶段=新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的形状，而不需要绘制整个舞台和/或图层？

在此先感谢。

来源

2014-01-23 fwshngtn

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

解决方法：

回落到版本4.4.0
使用layer.drawScene（），它可以节省由不重绘命中画布重绘时间。

来源

2014-01-23 19:03:42 markE

感谢您的回复。我试过layer.drawScene（），实际上它比只使用layer.draw（）更好。正如你所提到的，4.4.0版似乎可以正常工作，但是回到该版本是没有选择的：/。 – fwshngtn

当您使用node.draw（）时，它将绘制OVER现有图片。（没有清除现有状态，因为这是不可能的）如果你的节点下没有其他元素，你可以使用'layer.clear'方法。如果你有性能问题，请看：https://github.com/lavrton/kineticjs-tips-and-tools#performance 大多数导入都是图层和缓存。 – lavrton

@lavrton，更新：Eric说node.draw已被删除。但是，当在V4.4中引入node.draw时，它清除了现有节点（未透支） - 因此，user3228838的不透明度更改在4.4以下工作。根据OP的设计要求，您对多层图像的建议可降低重绘成本，听起来不错。缓存非常适合非常复杂的形状。缓存对于多个静态且不必生成事件的形状非常有用。正如我“在两行之间阅读”一样，我认为缓存在这里不会有用。 – markE

KineticJS形状不透明

回答

相关问题