本文介绍了在画布中创建多个可拖动圆的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法在HTML画布中制作几个圆圈可拖曳。我真的不知道我做错了什么。
I'm having trouble with making several circles in a HTML canvas draggable. I don't really know what I'm doing wrong. Hope someone can point out my mistakes (rookie here so, please, don't bash too hard).
我已经在这里附上我的代码:
I have attached my code here:
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;
}
}
推荐答案
这可能是寻找
//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();
查看此
这篇关于在画布中创建多个可拖动圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!