動力學JS圖像調用setVisible

Question

我嘗試使用下面的腳本添加一個圓圈內的圖像：

.... 
    var rCvisible = false; 
    ... 
    var rC = new Image(); 
      rCircle; 
      rC.onload = function() { 
        rCircle = new Kinetic.Image({ 
         image: rC, 
         opacity: 0.3, 
         visible: rCvisible 
        }); 
       }; 


     rC.src = '../../Content/images/rotate.png'; 

var circle2 = new Kinetic.Circle({ 
       drawFunc: function (canvas) { 
        var context2 = canvas.getContext(); 
        centerX2 = blueLine2.getPosition().x; 
        centerY2 = greenLine2.getPosition().y; 
        context2.drawImage(rC, centerX2 - 20, centerY2 - 20, 44, 40); 
        context2.beginPath(); 
        context2.arc(centerX2, centerY2, this.getRadius(), 0, 2 * Math.PI, false); 
        context2.lineWidth = this.getStrokeWidth(); 
        context2.strokeStyle = this.getStroke(); 
        context2.stroke(); 
       }, 
       x: cx + gx, 
       y: cy + gy, 
       radius: 70, 
       stroke: '#00ffff', 
       strokeWidth: 3, 
       opacity: 0.5 
      }); 
..... 
    circle2.on('mouseover', function() { 
       document.body.style.cursor = 'pointer'; 
       rCvisible = true; 
       layer2.draw(); 
      }); 
      circle2.on('mouseout', function() { 
       document.body.style.cursor = 'default'; 
       rCvisible = false; 
       layer2.draw(); 
      }); 

我也試過：

context2.drawImage(rC, centerX2 - 20, centerY2 - 20, 44, 40, setVisible(false)); 

我的目標是隱藏圖像，然後再顯示它當鼠標在圓圈內時。 我得到了follwing錯誤：

'setVisible' is undefined 

會感激你的建議，在此先感謝。

Answer 1

可以使用fillPatternImage屬性做完全填充/ NOFILL，你需要

您可以設置任何形狀的填充是一個圖像，而不是顏色。所以，你可以填寫你的圈子，像這樣的圖像：

var circle = new Kinetic.Circle({ 
     x: 100, 
     y: 100, 
     radius: 70, 
     fillPatternImage: "yourImage", // this is an Image object -- new Image(); 
     fillPatternOffset: [-220, 70], 
     stroke: '#00ffff', 
     strokeWidth: 3, 
     opacity:0.5 
    }); 

您也可以改變圖像和純色這樣之間的形狀的填充：

 // change the circle’s fill to solid white 
     this.setFill("white"); 

     // change your circle’s fill to an image 
     // Note: you must clear the solid fill before applying the image fill 
     this.setFill(""); 
     this.setFillPatternImage(yourImage); 

所以讓你的顯示鼠標懸停圖像的效果，你可以設置這些動力學事件：

circle.on('mouseover touchstart', function() { 
     this.setFill(""); 
     this.setFillPatternImage(img); 
     this.setFillPatternOffset(-160, 100); 
     layer.draw(); 
    }); 

    circle.on('mouseout touchend', function() { 
     this.setFill("white"); 
     layer.draw(); 
    }); 

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/WZjtu/

body { margin：0px; padding：0px; }

var img=new Image(); 
    img.onload=function(){ 
     draw(); 
    } 
    img.src="http://dl.dropbox.com/u/139992952/stackoverflow/KoolAidMan.png"; 

    function draw() { 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 200, 
     height: 200 
    }); 
    var layer = new Kinetic.Layer(); 

    var circle = new Kinetic.Circle({ 
     x: 100, 
     y: 100, 
     radius: 70, 
     fillPatternImage: "", 
     fillPatternOffset: [-220, 70], 
     stroke: '#00ffff', 
     strokeWidth: 3, 
     opacity:0.5 
    }); 


    circle.on('mouseover touchstart', function() { 
     this.setFill(""); 
     this.setFillPatternImage(img); 
     this.setFillPatternOffset(-160, 100); 
     layer.draw(); 
    }); 

    circle.on('mouseout touchend', function() { 
     this.setFill("white"); 
     layer.draw(); 
    }); 

    layer.add(circle); 
    stage.add(layer); 
    } 

</script>