如何獲取被點擊的對象的副本

Question

你好，我目前正在使用html5和easelJS.I有一個畫布和一個圖像在上面。我想要的是，當我點擊圖像的副本創建當我在畫布上點擊其他地方時，我的圖像被複制，因此在畫布上留下了兩幅圖像。 我想問有沒有一種方法可以讓我知道我是在點擊圖像還是在畫布上。以及如何製作我的圖像的副本，因爲我寫了一些代碼，但它刪除了我的原始圖像並且將其放置於療法的地方在畫布上只留下一個圖像

感謝

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

這是一個完整的工作示例：

$(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); 
    } 
)