0

mousedownHTML5キャンバスに表示した画像の1つで「マウスダウン」が実行されたことを検出するために使用している次のJavaScript関数があります。

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        displayTip(obj.shape.index);

        console.log(obj);
    }

ご覧のとおり、オブジェクトが描画されているキャンバスの一部で「マウスダウン」が実行されるたびに、この関数は関数を呼び出しますdisplayTip。

関数は現在、次のdisplayTipようになっています。

function displayTip(index){
    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
    console.log("canvasImage id = " + canvasImage.id);
}

これで、mousedown関数は部分的に正しく機能しています。関数が を呼び出すとdisplayTip、この関数は段落の内容を配列の位置にtipsParagraph格納されているものに更新します。ただし、ご覧のとおり、関数の最後で、Iラインを持っているtipsindexdisplayTip

`console.log("canvasImage id = " + canvasImage.id);

mousedown関数の最後に、次の行があります

console.log(obj);

objキャンバス上のクリックの時点で検出されたオブジェクトは、行によって決定されるように、変数に格納されることは私の理解です

var obj = this.getIntersection(this.getUserPosition());

しかし、コンソールでは、displayTip()関数ログの最後のログcanvasImage.idは未定義であり、mousedown関数ログの最後のログは変数の値objが[object Object]

mycanvasImage.idが定義されていない理由がわかりません... が検出された画像の ID 属性を表示する必要がありますmousedown...なぜこれが起こっていないのでしょうか?

おそらく、コンソールログvalue of variable obj:[object Object]は、マウスダウンがマウスダウンの位置で画像を「手に入れた」ことを意味するので、そのオブジェクトのIDを表示する必要がありますか？

編集 2013 年 1 月 3 日 @ 14:35

キャンバス画像のコードは次のとおりです。

最初に、次の行を使用して、他のすべてのグローバル変数とともに、ファイルの先頭でグローバル変数として定義されます。

var canvasImage;

次の使用は、次のように使用した「drawImage()」関数内で行われます。

var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: randomPosition(0, 950),  //imageX,    //stage.getWidth() / 2 - 50 / 2,
      y: randomPosition(30, 350),  //imageY,    //stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

これが正しい方法かどうかはわかりませんが、私がやりたいことは、このmousedown関数を使用して、マウスダウン関数が呼び出された画像を「取得」し、その特定の画像を一時的に変数に保存することです、そのすべての属性 (id、幅、高さ、x、y) と共に、これらの属性にアクセスして他のコードで使用できるようにします。

4

2 に答える 2

0

マウスイベント中に画像の属性にアクセスする方法は次のとおりです

関心のあるマウス イベントをサブスクライブし、イベントで呼び出す関数を指定するだけです。

関数内の「this」オブジェクトは Kinetic.Image オブジェクトであり、getXXX() を呼び出して、関心のある属性を取得できます。

        myImage.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/2Qt97/

ボディ { 余白: 0px; パディング: 0px; } 

  function initStage(images) {

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

    var layer = new Kinetic.Layer();

    var img=new Image();
    var coffee;
    img.onload=function(){
        coffee=new Kinetic.Image({
            x:125,
            y:100,
            name:"Yum!",
            id:"coffeePic",
            image:img
        });
        layer.add(coffee);
        stage.add(layer);

        coffee.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

    }
    img.src="http://dl.dropbox.com/u/139992952/coffee.png";

  }
  initStage();

</script>

于 2013-03-02T06:10:45.753 に答える
0

「canvasImage」は定義されていません。その通りです。関数では、このオブジェクトを宣言することはありません。そして、「obj」オブジェクトについては、内容を教えてください...というのは、問題を理解するのが非常に難しいからです。

于 2013-03-01T13:23:29.127 に答える