动力学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>