드래그 가능한 이미지에 캔버스 그리기

Question

일부 드래그 가능한 이미지가있는 html 페이지에서 마우스 포인터, 드로잉 이미지 및 모양을 사용하여 모양이나 선을 그려야하지만 드래그 가능한 이미지에는 적용되지 않습니다. 이전에는
으로 유지되어야합니다. 그 사이에, 나는 모양을 만들고 선을 그릴 수 있었다. 그러나 내가 그림 위에 선
를 그릴 때 그것은 배경으로 돌아 간다. 누군가는 내가 현재 사용중인
캔버스와 html5를 사용하여 어떻게 동일한 결과를 얻을 수 있는지 제안 할 수 있습니까?

Answer 1

한 가지 방법은 이미지와 그 이미지

당신은 오프셋 이미지로 동일한 오프셋과 모양을 그리기에 의해 조정 이미지와 그 형태를 유지할 수와 관련된 형태 모두를 그리는 함수를 작성하는 것입니다. 당신의 이미지를 그릴 경우에 따라서 [X, Y]를 당신은 모양으로 각 지점에 X & Y를 추가 :

// points[] is an array of points that defines the shape you 
// want drawn on your image 

function drawImageWithShapes(img,points,x,y){ 
    ctx.drawImage(img,x,y); 
    ctx.beginPath(); 
    ctx.moveTo(points[0].x+x,points[0].y+y); 
    for(var i=1; i<points.length;i++){ 
     ctx.lineTo(points[i].x+x,points[i].y+y); 
    } 
    ctx.stroke(); 
} 

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.lineWidth=4; 
 
ctx.strokeStyle='red'; 
 

 
var x=50; 
 
var y=50; 
 

 
var points=[]; 
 
points.push({x:37,y:0}); 
 
points.push({x:75,y:75}); 
 
points.push({x:0,y:75}); 
 
points.push({x:37,y:0}); 
 

 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png"; 
 
function start(){ 
 
    drawImageWithShapes(img,points,x,y); 
 
} 
 

 
function drawImageWithShapes(img,points,x,y){ 
 
    ctx.drawImage(img,x,y); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(points[0].x+x,points[0].y+y); 
 
    for(var i=1; i<points.length;i++){ 
 
    ctx.lineTo(points[i].x+x,points[i].y+y); 
 
    } 
 
    ctx.stroke(); 
 
} 
 

 
$('#test').click(function(){ 
 
    x+=10; 
 
    y+=10; 
 
    ctx.clearRect(0,0,cw,ch); 
 
    drawImageWithShapes(img,points,x,y); 
 

 
});

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id=test>Move and Redraw</button><br><br> 
 
<canvas id="canvas" width=300 height=300></canvas>