如何使不同形狀的畫布可拖動，並將其特定區域拖放到同一畫布中

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