클릭 한 객체의 복사본을 얻는 방법

Question

안녕하세요. 저는 현재 html5 및 easelJS로 작업하고 있습니다. 캔버스와 이미지가 있습니다. 원하는 이미지를 클릭하면 사본이 만들어집니다. 캔버스에서 다른 장소를 클릭하면 내 이미지가 복사되어 캔버스에 두 개의 이미지가 남습니다. 이미지 나 캔버스를 클릭하는지 여부를 알 수있는 방법이 있는지 묻고 싶습니다. 일부 코드를 작성했지만 내 이미지의 사본을 만드는 방법은 무엇입니까? 다시 추가 붙여해야 할 때를 한 후, 당신은 비트 맵에서 내장 된 이미지를 저장하여이 문제를 해결할 수

감사

Answer 1

캔버스에 하나의 이미지를 떠나 자리를 THER에 배치합니다. 또한이 같은 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 정의합니다. 당신이 나에게 말할 수있는 당신 한테도 그래에 많이

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