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

我的目标是隐藏图像，然后在鼠标位于圆圈内时显示图像。我得到了以下错误：

'setVisible' is undefined

非常感谢您的建议，谢谢您。

Answer 1

您可以使用fillPatternImage属性完全执行您需要的填充/填充

您可以将任何形状的填充设置为图像而不是颜色。所以，你可以用这样的图像填充你的圆圈：

    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/

身体 { 保证金：0px; 填充：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>

Kinetic JS图像setVisible

1 个答案: