動態拖動點在畫布中的內容

Question

我有一個應用程序，我需要將創建的點移動到畫布的某個部分。我該怎麼做？

$("#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 anvas。 事情是這樣的：

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拖動div..Example：

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