Javascript 在画布中动态拖动点内容

我有一个应用程序，需要将我创建的点移动到画布的某个部分。我怎么做

    $("#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();
    }

导入

并使用jquery拖动您的div..示例：

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

---

没有简单的方法可以在画布上拖动绘制的对象，因此您必须存储所有点的位置，并重新绘制整个画布。 大概是这样的：

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();
}

var点=[]
var drag_point=-1
$（“#画布”）.mousedown（函数（e）{
var pos=获取位置（e）
拖动点=获取点（位置x，位置y）
如果（drag_point==-1）{//此位置没有点，请添加新点
图纸坐标（位置x、位置y）
点推（pos）
}
});
$（“#画布”）.mousemove（函数（e）{
如果（拖动_点！=-1）{//如果当前正在拖动点。。。
var pos=获取位置（e）
//…更新点位置。。。
点[拖动点].x=pos.x
点[拖动点].y=位置y
重画（）/…和重画画布
}
});
$（“#画布”）.mouseup（函数（e）{
拖动点=-1
});
函数getPointAt（x，y）{
对于（var i=0；iSo如果你点击一个空白区域，它应该会创建一个新点，如果你点击一个现有点，你应该能够拖动它？@Manueloto是的！没错！很好！这很好，请再问一个问题。我如何获得画布上所有点的坐标？感谢genius！所有点都存储在“点”数组中。Each point是这样一个对象{x:0，y:0}你是最好的！谢谢！你赢得了最好的答案我想知道从点1到点6连接一条线是否容易（假设你有10个点）不客气！画一条线可以通过在每个点上迭代，然后调用ctx.lineTo（x，y）而不是ctx.arc（）来完成.只需谷歌一下，就可以了；）