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形狀不透明

回答

相關問題