javascript - 在 Canvas 中创建多个可拖动的圆圈

Question

我在将 HTML Canvas 中的多个圆圈设为可拖动时遇到了问题。我真的不知道我做错了什么。希望有人能指出我的错误(这里是菜鸟，请不要猛烈抨击)。

我在这里附上了我的代码:

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

  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;
  var dragok = false;
  var startX;
  var startY;



var circles=[];
circles.push({x:150,y:100,radius:20});
circles.push({x:200,y:20,radius:10});
circles.push({x:290,y:120,radius:30});
circles.push({x:180,y:300,radius:15});
circles.push({x:80,y:220,radius:40});


drawAll();

canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;

function drawAll(){
  for(var i=0;i<circles.length;i++){
    drawCircle(circles[i]);
  }
}

function drawCircle(circle){
  var tempR;
  var tempB;
  var tempG;
  ctx.beginPath();
  ctx.arc(circle.x,circle.y,circle.radius,0,2*Math.PI);
  ctx.closePath();
  tempR = Math.floor(Math.random()*255);
  tempG = Math.floor(Math.random()*255);
  tempB = Math.floor(Math.random()*255);
  tempColor = "rgb(" + tempR + "," + tempG + "," + tempB +")";
  ctx.fillStyle = tempColor;
  ctx.fill();
}

function clear() {
    ctx.clearRect(0, 0, cw, ch);
}

// handle mousedown events
function myDown(e) {

    // tell the browser we're handling this mouse event
    e.preventDefault();
    e.stopPropagation();

    // get the current mouse position
    var mx = parseInt(e.clientX - offsetX);
    var my = parseInt(e.clientY - offsetY);

    // test to see if mouse is inside the circle
    dragok = false;
    for (var i = 0; i < circles.length; i++) {
        var r = circles[i];
        if (dx * dx && dy * dy < circles[i].radius * circles[i].radius) {
            // if yes, set that circles isDragging=true
            dragok = true;
            r.isDragging = true;
        }
    }
    // save the current mouse position
    startX = mx;
    startY = my;
}


// handle mouseup events
function myUp(e) {
    // tell the browser we're handling this mouse event
    e.preventDefault();
    e.stopPropagation();

    // clear all the dragging flags
    dragok = false;
    for (var i = 0; i < circles.length; i++) {
        circles[i].isDragging = false;
    }
}


// handle mouse moves
function myMove(e) {
    // if we're dragging anything...
    if (dragok) {

        // tell the browser we're handling this mouse event
        e.preventDefault();
        e.stopPropagation();

        // get the current mouse position
        var mx = parseInt(e.clientX - offsetX);
        var my = parseInt(e.clientY - offsetY);

        // calculate the distance the mouse has moved
        // since the last mousemove
        var dx = mx - startX;
        var dy = my - startY;

        // move each circle that isDragging
        // by the distance the mouse has moved
        // since the last mousemove
        for (var i = 0; i < circles.length; i++) {
            var r = circles[i];
            if (r.isDragging) {
                r.x += dx;
                r.y += dy;
            }
        }

        // redraw the scene with the new circle positions
        drawAll();

        // reset the starting mouse position for the next mousemove
        startX = mx;
        startY = my;

    }
}

Answer 1

这可能是要找的东西

//track mouse position on mousemove
var mousePosition;
//track state of mousedown and up
var isMouseDown;

//reference to the canvas element
var c = document.getElementById("myCanvas");
//reference to 2d context
var ctx = c.getContext("2d");

//add listeners
document.addEventListener('mousemove', move, false);
document.addEventListener('mousedown', setDraggable, false);
document.addEventListener('mouseup', setDraggable, false);

//make some circles
var c1 = new Circle(50, 50, 50, "red", "black");
var c2 = new Circle(200, 50, 50, "green", "black");
var c3 = new Circle(350, 50, 50, "blue", "black");
//make a collection of circles
var circles = [c1, c2, c3];

//main draw method
function draw() {
    //clear canvas
    ctx.clearRect(0, 0, c.width, c.height);
    drawCircles();
}

//draw circles
function drawCircles() {
    for (var i = circles.length - 1; i >= 0; i--) {
        circles[i].draw();
    }
}

//key track of circle focus and focused index
var focused = {
   key: 0,
   state: false
}

//circle Object
function Circle(x, y, r, fill, stroke) {
    this.startingAngle = 0;
    this.endAngle = 2 * Math.PI;
    this.x = x;
    this.y = y;
    this.r = r;

    this.fill = fill;
    this.stroke = stroke;

    this.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, this.startingAngle, this.endAngle);
        ctx.fillStyle = this.fill;
        ctx.lineWidth = 3;
        ctx.fill();
        ctx.strokeStyle = this.stroke;
        ctx.stroke();
    }
}

function move(e) {
    if (!isMouseDown) {
        return;
    }
    getMousePosition(e);
    //if any circle is focused
    if (focused.state) {
        circles[focused.key].x = mousePosition.x;
        circles[focused.key].y = mousePosition.y;
        draw();
        return;
    }
    //no circle currently focused check if circle is hovered
    for (var i = 0; i < circles.length; i++) {
        if (intersects(circles[i])) {
            circles.move(i, 0);
            focused.state = true;
            break;
        }
    }
    draw();
}

//set mousedown state
function setDraggable(e) {
    var t = e.type;
    if (t === "mousedown") {
        isMouseDown = true;
    } else if (t === "mouseup") {
        isMouseDown = false;
        releaseFocus();
    }
}

function releaseFocus() {
    focused.state = false;
}

function getMousePosition(e) {
    var rect = c.getBoundingClientRect();
    mousePosition = {
        x: Math.round(e.x - rect.left),
        y: Math.round(e.y - rect.top)
    }
}

//detects whether the mouse cursor is between x and y relative to the radius specified
function intersects(circle) {
    // subtract the x, y coordinates from the mouse position to get coordinates 
    // for the hotspot location and check against the area of the radius
    var areaX = mousePosition.x - circle.x;
    var areaY = mousePosition.y - circle.y;
    //return true if x^2 + y^2 <= radius squared.
    return areaX * areaX + areaY * areaY <= circle.r * circle.r;
}

Array.prototype.move = function (old_index, new_index) {
    if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
    }
    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
};
draw();

查看此 DEMO