0

次のスクリプトを使用して、円の中に画像を追加しようとしています:

   ....   
   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

よろしくお願いします。

4

1 に答える 1

1

fillPatternImage 属性を使用して、必要な Fill/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/

ボディ { 余白: 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>

于 2013-04-01T04:34:26.353 に答える