キャンバス内のポイントを動的にドラッグする

Question

作成したポイントをキャンバスの特定の部分に移動する必要のあるアプリケーションがあります。どうしたらいいですか？あなたのdiv..Exampleをドラッグする

$("#canvas").click(function(e){ 
     getPosition(e); 
    }); 

    var pointSize = 1; 

    function getPosition(event){ 
     var rect = canvas.getBoundingClientRect(); 
     var x = event.clientX - rect.left; 
     var y = event.clientY - rect.top; 
      console.log(x,y) 
     drawCoordinates(x,y); 
    } 

    function drawCoordinates(x,y){ 
     var ctx = document.getElementById("canvas").getContext("2d"); 


     ctx.fillStyle = "#ff2626"; // Red color 

     ctx.beginPath(); 
     ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); 
     ctx.fill(); 
    } 

http://jsfiddle.net/bfe8160h/

Answer 1

キャンバスに描かれたものをドラッグする簡単な方法はありません、あなたはすべてのポイントの位置を保存し、c全体を再描画する必要がありますアンバース。このような 何か：あなたは空のスペースをクリックした場合

var points = [] 
var drag_point = -1 

$("#canvas").mousedown(function(e){ 
    var pos = getPosition(e) 
    drag_point = getPointAt(pos.x,pos.y) 
    if(drag_point==-1){ // no point at this position, add new point 
     drawCoordinates(pos.x,pos.y) 
     points.push(pos) 
    } 

}); 
$("#canvas").mousemove(function(e){ 
    if(drag_point!=-1){ // if currently dragging a point... 
     var pos = getPosition(e) 
     //...update points position... 
     points[drag_point].x = pos.x 
     points[drag_point].y = pos.y 
     redraw() // ... and redraw canvas 
    } 
}); 
$("#canvas").mouseup(function(e){ 
    drag_point = -1 
}); 

function getPointAt(x,y){ 
    for(var i=0;i<points.length;i++){ 
     if(Math.abs(points[i].x-x)<pointSize && Math.abs(points[i].y-y)<pointSize) // check if x,y is inside points bounding box. replace with pythagoras theorem if you like. 
      return i 
    } 
    return -1 // no point at x,y 
} 

function redraw(){ 
    var canvas = document.getElementById("canvas") 
    var ctx = canvas.getContext("2d"); 

    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas 

    for(var i=0;i<points.length;i++){ // draw all points again 
     drawCoordinates(points[i].x,points[i].y) 
    } 
} 

function getPosition(event){ 
    var rect = canvas.getBoundingClientRect(); 
    var x = event.clientX - rect.left; 
    var y = event.clientY - rect.top; 
    return {x:x,y:y} 
} 

function drawCoordinates(x,y){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 

    ctx.fillStyle = "#ff2626"; // Red color 

    ctx.beginPath(); 
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); 
    ctx.fill(); 
} 

Answer 2

輸入 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> と使用jqueryの：

$('#divname').draggable();