如何在可拖动的画布上制作不同形状的画布，并在同一画布中放置它的特定区域 [英] How can I make different shapes of a canvas draggable and particular area of it droppable in the same canvas
问题描述
我想创建一个Canvas，其中有两个区域（左和右），左侧面板将包含一些可拖动的形状（静态），在右侧我可以放下它们，但我面临以下问题，
- 我无法制作我在左侧绘制的形状，可拖动，因为有没有与他们相关联的ID。
- 我不知道如何使某些特定区域可以删除。
以下代码可视化我想要实现的目标 -
<身体GT;
< canvas id =myCanvaswidth =800height =600style =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/
所以如果有人我可以说明如何实现这一目标，这将是一个很大的帮助。
提前致谢
拖放特定区域
更新：副本在移动框时，框保持原始位置。
首先，您需要能够检测到矩形。你可以通过在代码中加入对象来实现这一点：
功能框（x，y，w，h，rgb）{
this.x = x，
this.y = y;
this.xS = x; //保存x
this.yS = y; //保存y
this.w = w;
this.h = h;
this.rgb = rgb;
//确定箱子是否被拖走
this.draging = false;
}
不需要添加事件监听器来确定是否有人点击，你还需要确定该人是否在您的某个方框中点击。
c.addEventListener（mousedown，down）;
c.addEventListener（mousemove，move）;
c.addEventListener（mouseup，up）;
因此，已经发生事件以检测何时按下鼠标按钮，释放回来以及是否鼠标在画布内移动。对于这些事件，我们有函数，down（），move（）和up（），准备执行。
以下示例中将显示所有函数。 / p>
当我们愉快地拉动我们的盒子并释放鼠标按钮时，我们需要检查盒子是否掉落在可丢弃区域。我们在up（） - 函数中执行此操作。如果下降没问题，则可以保留该框，否则我们会将其发回原来的位置。
工作示例
var c = document.getElementById（canvas）; var ctx = c.getContext（2d）; c.width = 600; c.height = 300; //我的鼠标coordinatesvar x，y; c.addEventListener（mousedown，down）; c.addEventListener（mousemove，move）; c.addEventListener（mouseup，up）; //我会将此框保存在此数组中myBoxes = new Array（）; //此函数描述框是什么。//每个创建的框都有自己的值函数框（x，y，w，h，rgb）{this.x = x ，this.y = y; this.xS = x; //保存x this.yS = y; // save y this.w = w; this.h = h; this.rgb = rgb; //确定盒子是否被拖动this.draging = false;} //让我们做一些盒子!! myBoxes [0] =新盒子（10,10,50,100，green）; myBoxes [1] = new box（80,50,100,75，blue）; myBoxes [2] = new box（40,150,20,70，yellow）; //这里我们绘制所有函数draw（）{ctx.clearRect（0,0， c.width，c.height）; //可停留区域ctx.fillStyle =red; ctx.fillRect（c.width / 2,0，c.width，c.height）; //盒！ for（var i = 0; i< myBoxes.length; i ++）{var b = myBoxes [i]; //新代码更新if（b.draging）{//移动框//也在原始地点绘制ctx.fillStyle =grey; //我选择了不同的颜色，使其看起来更像是被移动的盒子的阴影。 ctx.fillRect（b.xS，b.yS，b.w，b.h）; ctx.strokeRect（b.xS，b.yS，b.w，b.h）; } //更新的新代码结束ctx.fillStyle = b.rgb; ctx.fillRect（b.x，b.y，b.w，b.h）; ctx.strokeRect（b.x，b.y，b.w，b.h）; } //让我们继续重新绘制这个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> b.x&& x< b.x + b.w&& y> b.y&& y< b.y + b.h）{b.draging = true;函数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）{b.x = x; b.y = 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）{//让我们看看矩形是否在可丢弃区域内如果（b.x> c.width / 2）{//是的！ b.x = x; b.y = y; b.draging = false; } else {//不，不是，把它送回原来的地方b.x = b.xS; b.y = b.yS; b.draging = false; } draw（）;
canvas {border： 1px纯黑色; }
< canvas id =canvas>< ; / canvas>
I want to create a Canvas in which there will be two areas (Left and right), Left panel will contain some shapes which will be draggable(static as well) and on the right side I would be able to drop them, but I am facing following problem,
- I am not able to make the shapes which i draw on the left side, draggable, because there is no id associated with them.
- I do not know how to make some particular area droppable.
Here is code to visualize what I am trying to achieve-
<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>
Here is the JS fiddle for the same - http://jsfiddle.net/akki166786/4tfyy4o5/
so if anybody can shed some light on how can I achieve this, it will be a great help.
Thanks in Advance
Drag and drop in specifik area
UPDATE: Copy of box remains at original position while it's being moved.
First you need to be able to detect your rectangles. You do this by making then into objects in your code:
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;
}
No you need to add an event listener to determine if someone is clicking, you also need to determine if the person clicked in one of your boxes.
c.addEventListener("mousedown",down);
c.addEventListener("mousemove",move);
c.addEventListener("mouseup",up);
So events have been made to detect when the mouse button is pressed down, released back up and if the mouse moves within the canvas. To these events we have functions, down(), move() and up(), ready to be executed.
All functions will be visible in the example below.
When we're happily draging our boxes and releasing our mouse button, we need to check if the box was dropped in the dropable area. We do this in the up()-function. If the drop was OK, the box can stay, otherwise we send it back to where it came from.
Working example
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,b.w,b.h);
ctx.strokeRect(b.xS,b.yS,b.w,b.h);
}
//End of new code for update
ctx.fillStyle=b.rgb;
ctx.fillRect(b.x,b.y,b.w,b.h);
ctx.strokeRect(b.x,b.y,b.w,b.h);
}
//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>b.x && x<b.x+b.w && y>b.y && y<b.y+b.h) {
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) {
b.x = x;
b.y = 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 (b.x>c.width/2) {
//Yes is it!
b.x = x;
b.y = y;
b.draging = false;
}
else {
//No it's not, sending it back to its ordiginal spot
b.x = b.xS;
b.y = b.yS;
b.draging = false;
}
}
}
}
draw();
canvas {
border: 1px solid black;
}
<canvas id="canvas"></canvas>
这篇关于如何在可拖动的画布上制作不同形状的画布，并在同一画布中放置它的特定区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
