캔버스에 이미지 다시 그리기

Question

하나의 캔버스에 두 개의 이미지가 있어야합니다. 함수에 문제가 있습니다. clear(); 이것은 캔버스에 이미지를 드래그해야 할 때 사용됩니다.

문제는 Canvas가 마지막 이미지에만 나타납니다. context.save() 및 context.restore()를 사용하려고했지만 제 경우에는 유용하지 않았습니다.

context.save 및 context.restore 만 (변환, globalAlpha, ...) 컨텍스트의 상태 작동

  function drawImage(challengerImg,x,y,i){ 
      console.log("Function drawImage start"); 
      var events = new Events("layer0"); 
      var canvas = events.getCanvas(); 
      var context = events.getContext(); 
      var rectX = x; 
      var rectY = y; 

      var draggingRect = false; 
      var draggingRectOffsetX = 0; 
      var draggingRectOffsetY = 0; 

      events.setStage(function(){ 
       var mousePos = this.getMousePos(); 

       if (draggingRect) { 
        rectX = mousePos.x - draggingRectOffsetX; 
        rectY = mousePos.y - draggingRectOffsetY; 
       } 

       this.clear(); //Here is trouble 
       this.beginRegion(); 

       context.drawImage(challengerImg, rectX, rectY, challengerImg.width, challengerImg.height); 

       // draw rectangular region for image 
       context.beginPath(); 
       context.rect(rectX, rectY, challengerImg.width, challengerImg.height); 
       context.closePath(); 

       this.addRegionEventListener("mousedown", function(){ 
        draggingRect = true; 
        var mousePos = events.getMousePos(); 
        draggingRectOffsetX = mousePos.x - rectX; 
        draggingRectOffsetY = mousePos.y - rectY; 

       }); 
       this.addRegionEventListener("mouseup", function(){ 
        draggingRect = false; 
       }); 
       this.addRegionEventListener("mouseover", function(){ 
        document.body.style.cursor = "pointer"; 
       }); 
       this.addRegionEventListener("mouseout", function(){ 
        document.body.style.cursor = "default"; 
       }); 

       this.closeRegion(); 
      }); 
     } 

Answer 1

,하지만 무엇을 위해 : 캔버스에 그리기

switch(i) 
    { 
    case 0: 
    challengerImg = new Image(); 
    challengerImg.onload = function(){ 
     drawImage(this,x,y,i); 
    }; 
    challengerImg.src = "<?php echo $base_url; ?>/themes/bartik/images/sheep.png"; 
    break; 

    case 1: 
    tshirt = new Image(); 
    tshirt.onload = function(){ 
     drawImage(this,x,y,i); 
    }; 
    tshirt.src = "<?php echo $base_url; ?>/themes/bartik/images/tshirt.png"; 
    break; 
    } 

및 기능 안으로 렌더링.

컨텍스트를 지우면 비어있게됩니다.

은 당신이해야 할 것은에 :

• 캐치 마우스 이벤트 및
• 분명 변화 위치 변수
• 자신의 새로운 위치 저장

Answer 2

모든 이미지를 다시 그리기 캔버스() , restore()는 비트 맵 데이터를 전혀 처리하지 않습니다.

주위를 드래그하려면 기본적으로 그리기 할 요소가 포함되어 있지 않은 오프 스크린 캔버스가 있어야하며, 각 업데이트 후에는 드래그중인 요소 외에도 화면 외 캔버스를 그립니다.

이미 라이브러리를 사용하는 것이 더 간단 할 수도 있습니다. 대부분 http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/