html - ドラッグ可能な画像のキャンバス描画

Question

ドラッグ可能な画像を含む html ページでは、マウス ポインターを使用して図形または線を描画する必要があります。画像と図形の描画は行われますが、ドラッグ可能な画像では行われません
。その間、図形を作成して線を描くことができましたが、画像の上に線を描こうとすると
背景に戻ります。
現在使用されているキャンバスとhtml5を使用して同じことを達成する方法を誰かが提案できますか?

Answer 1

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>