如何使不同形状的画布可拖动，并将其特定区域拖放到同一画布中

Question

我想创建一个Canvas，其中将有两个区域（向左和向右），“左”面板将包含一些可拖动的形状（以及静态形状），在右侧，我可以将其放下，但是面临以下问题

我无法拖动在左侧绘制的形状，因为它们没有关联的ID。
我不知道如何使某些特定区域可投放。

这是使我想要实现的目标可视化的代码-

<body>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(250,0);
ctx.lineTo(250,600);
ctx.stroke();

ctx.fillStyle = "#FF0000";
ctx.fillRect(50,50,160,25);
ctx.fillStyle = "#0000FF";
ctx.font = "15px";
ctx.strokeText("Draggable Elements here",57,67);

ctx.fillStyle = "#FF0000";
ctx.fillRect(500,50,130,25);
ctx.font = "15px";
ctx.strokeText("Droppable area Here",510,67);    
</script>

</body>

这是相同的JS小提琴-http: //jsfiddle.net/akki166786/4tfyy4o5/

因此，如果有人可以阐明我如何实现这一目标，那将是很大的帮助。

提前致谢

Answer 1

在指定区域中拖放

更新：盒子的副本在移动时保持在原始位置。

首先，您需要能够检测到矩形。 您可以通过在代码中放入对象来实现：

function box(x,y,w,h,rgb) {
    this.x = x,
    this.y = y;
    this.xS = x; //saving x
    this.yS = y; //saving y
    this.w = w;
    this.h = h;
    this.rgb = rgb;

    //to determine if the box is being draged
    this.draging = false;
}

不需要，您无需添加事件侦听器来确定某人是否正在单击，还需要确定该人是否在您的其中一个框中单击了。

c.addEventListener("mousedown",down);
c.addEventListener("mousemove",move);
c.addEventListener("mouseup",up);

因此，已进行了一些事件来检测何时按下鼠标按钮，向上释放鼠标按钮以及鼠标是否在画布内移动。 对于这些事件，我们有准备执行的功能down（），move（）和up（）。

在以下示例中，所有功能均可见。

当我们愉快地拖动框并释放鼠标按钮时，我们需要检查框是否已放置在可放置区域中。 我们在up（）函数中执行此操作。 如果放行可以，则该框可以保留，否则我们会将其发送回原处。

工作实例

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); c.width = 600; c.height = 300; //My mouse coordinates var x,y; c.addEventListener("mousedown",down); c.addEventListener("mousemove",move); c.addEventListener("mouseup",up); //I'll save my boxes in this array var myBoxes = new Array(); //This function describes what a box is. //Each created box gets its own values function box(x,y,w,h,rgb) { this.x = x, this.y = y; this.xS = x; //saving x this.yS = y; //saving y this.w = w; this.h = h; this.rgb = rgb; //to determine if the box is being draged this.draging = false; } //Let's make some boxes!! myBoxes[0] = new box(10,10,50,100,"green"); myBoxes[1] = new box(80,50,100,75,"blue"); myBoxes[2] = new box(40,150,20,70,"yellow"); //here we draw everything function draw() { ctx.clearRect(0,0,c.width,c.height); //Dropable area ctx.fillStyle="red"; ctx.fillRect(c.width/2,0,c.width,c.height); //Boxes! for (var i = 0; i<myBoxes.length; i++) { var b = myBoxes[i]; //NEW CODE FOR UPDATE if (b.draging) { //box on the move //Also draw it on the original spot ctx.fillStyle="grey"; //I chose a different color to make it appear more as a shadow of the box that's being moved. ctx.fillRect(b.xS,b.yS,bw,bh); ctx.strokeRect(b.xS,b.yS,bw,bh); } //End of new code for update ctx.fillStyle=b.rgb; ctx.fillRect(bx,by,bw,bh); ctx.strokeRect(bx,by,bw,bh); } //Let's keep re-drawing this requestAnimationFrame(draw); } function down(event) { event = event || window.event; x = event.pageX - c.offsetLeft, y = event.pageY - c.offsetTop; for (var i = 0; i<myBoxes.length; i++) { var b = myBoxes[i]; if (x>bx && x<b.x+bw && y>by && y<b.y+bh) { b.draging = true; } } } function move(event) { event = event || window.event; x = event.pageX - c.offsetLeft, y = event.pageY - c.offsetTop; for (var i = 0; i<myBoxes.length; i++) { var b = myBoxes[i]; if (b.draging) { bx = x; by = y; } } } function up(event) { event = event || window.event; x = event.pageX - c.offsetLeft, y = event.pageY - c.offsetTop; for (var i = 0; i<myBoxes.length; i++) { var b = myBoxes[i]; if (b.draging) { //Let's see if the rectangle is inside the dropable area if (bx>c.width/2) { //Yes is it! bx = x; by = y; b.draging = false; } else { //No it's not, sending it back to its ordiginal spot bx = b.xS; by = b.yS; b.draging = false; } } } } draw();

 canvas { border: 1px solid black; }

 <canvas id="canvas"></canvas>

Answer 2

您只使用一个画布，如果您使用两个单独的画布，一个要用于页面上要处理的每个元素，可能会更好。 因此每个元素都有一个元素ID。 加。 如果您的绘图很简单，请考虑使用div代替画布

Answer 3

一旦绘制到画布上，形状（或线条，图像，所有内容）将不再可用。

您需要做的是将每个形状存储在代码中的一个对象中。 例如：

var rectangle = {
    width: 100,
    height: 100,
    x: 50,
    y: 50
}

然后，当您拖动rectangle ，您将需要在mouseup上更新它的x和y属性（或者如果要拖动预览，则在拖动它时）。

如何使不同形状的画布可拖动，并将其特定区域拖放到同一画布中

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-06-12 17:07:47

解决方案2
0 2015-06-12 13:32:07

解决方案3
0 2015-06-12 13:37:55

如何使不同形状的画布可拖动，并将其特定区域拖放到同一画布中

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-06-12 17:07:47

解决方案2 0 2015-06-12 13:32:07

解决方案3 0 2015-06-12 13:37:55

解决方案1
1 已采纳 2015-06-12 17:07:47

解决方案2
0 2015-06-12 13:32:07

解决方案3
0 2015-06-12 13:37:55