クリックしたオブジェクトのコピーを取得する方法

Question

こんにちは私は現在、html5とeaselJSで作業しています。私はキャンバスとイメージを持っています。イメージをクリックするとコピーが作成されますキャンバスで他の場所をクリックすると、そこにイメージがコピーされてキャンバスに2つのイメージが残ります。 画像をクリックしているのかキャンバスをクリックしているのかを知る方法はあるのですか？コードを書きましたが、私の画像のコピーを作る方法はありますか？ THER場所にそれを置くあなたが貼り付ける必要があるときにそれらを再追加し、その後、あなたのビットマップがから構築された画像を格納することによってこの問題を解決することができますキャンバス上

おかげ

Answer 1

を1つのイメージのみを残します。また、あなたはこのようにStage.prototype._handleMouseDownをオーバーライドする必要があります：あなたの実装に続いて

window.Stage.prototype._handleMouseDown = function(e){ 
     if (this.onMouseDown) { 
      this.onMouseDown(new MouseEvent("onMouseDown", this.mouseX, this.mouseY, this, e)); 
     } 
     var target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, (this._mouseOverIntervalID ? 3 : 1)); 
     if (target) { 
      if (target.onPress instanceof Function) { 
       var evt = new MouseEvent("onPress", this.mouseX, this.mouseY, target, e); 
       target.onPress(evt); 
       if (evt.onMouseMove || evt.onMouseUp) { this._activeMouseEvent = evt; } 
      } 
      this._activeMouseTarget = target; 
     } else { 
      this.onPressThrough && this.onPressThrough(e); 
     } 
    } 

このようonPressThrough定義します。ここで

stage.onPressThrough = function(event){ 
     console.log("paste"); 
     paste(event.x, event.y); 
    } 

は完全な作業例です：たくさんごhelp.Butため

$(document).ready(
    function(){ 
     var canvas = document.createElement('canvas'); 

     $(canvas).attr('width', '1000'); 
     $(canvas).attr('height', '1000'); 

     $('body').append(canvas); 

     var stage = window.stage = new Stage(canvas); 
     canvas.stage = stage; 


     function copy(target){ 
      window.clipboard = target; 
     } 

     function addImage(image, x, y){ 
      var bitmap = new Bitmap(image); 
      bitmap.image = image; 

      bitmap.onPress = function(event){ 
       console.log("copy") 
       copy(this.image); 
      } 
      stage.addChild(bitmap); 
      bitmap.x = x || 0; 
      bitmap.y = y || 0; 

     } 

     function paste(x, y){ 
      window.clipboard && addImage(clipboard, x, y); 
     } 

     window.Stage.prototype._handleMouseDown = function(e){ 
      if (this.onMouseDown) { 
       this.onMouseDown(new MouseEvent("onMouseDown", this.mouseX, this.mouseY, this, e)); 
      } 
      var target = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, (this._mouseOverIntervalID ? 3 : 1)); 
      if (target) { 
       if (target.onPress instanceof Function) { 
        var evt = new MouseEvent("onPress", this.mouseX, this.mouseY, target, e); 
        target.onPress(evt); 
        if (evt.onMouseMove || evt.onMouseUp) { this._activeMouseEvent = evt; } 
       } 
       this._activeMouseTarget = target; 
      } else { 
       this.onPressThrough && this.onPressThrough(e); 
      } 
     } 

     stage.onPressThrough = function(event){ 
      console.log("paste"); 
      paste(event.x, event.y); 
     } 

     var image = new Image(); 
     image.src = "assets/images/tempimage.png"; 
     addImage(image); 

     window.tick = function(){ 
      stage.update(); 
     } 

     Ticker.addListener(window); 
    } 
)