Fatal编程技术网
  • javascript/
  • Javascript 使用多个项目进行画布拖放

Javascript 使用多个项目进行画布拖放

javascript canvas

Javascript 使用多个项目进行画布拖放,javascript,canvas,Javascript,Canvas,我正在为一个项目创建一个多项目拖放，并且已经到达了一堵墙 目前，我已经在画布上添加了5个方形项目，并将x、y、宽度、高度和颜色存储到一个名为项目的数组中。我已经检测到鼠标选择这些方块中的一个并可以拖动项目。但是，我的问题是，我正在拖动的项目始终是同一个项目，即第一个添加到画布的项目。如果有人能帮我找出如何检测我特别选择了哪一项，那就太好了 有很多代码，所以我将尝试只发布所需的位 //Items are added to canvas and values added to items[]; //

我正在为一个项目创建一个多项目拖放，并且已经到达了一堵墙

目前，我已经在画布上添加了5个方形项目，并将x、y、宽度、高度和颜色存储到一个名为项目的数组中。我已经检测到鼠标选择这些方块中的一个并可以拖动项目。但是，我的问题是，我正在拖动的项目始终是同一个项目，即第一个添加到画布的项目。如果有人能帮我找出如何检测我特别选择了哪一项，那就太好了

有很多代码，所以我将尝试只发布所需的位

//Items are added to canvas and values added to items[];
//a click event runs when the canvas is clicked, the following code is then run
var mouseCheck = function(e) {
            var length = items.length;

            var pos = $('#scalesPlatform').offset(),
                top = pos.top,
                left = pos.left,
                mx = e.pageX - left,
                my = e.pageY - top;

                var imagedata = ctx.getImageData(mx, my, 1, 1);

                if (imagedata.data[3] > 0) {
                    for (var i = length - 1; i >= 0; i--) {
                        var hit = items[i];
                        offsetX = mx - items[i].x;
                        offsetY = my - items[i].y;
                        hit.x = mx - offsetX;
                        hit.y = my - offsetY;


                        canvas.addEventListener('mousemove', function() {

                            move(hit, drag, items, event);
                        });
                        canvas.addEventListener('mouseup', function() {
                            drag = false;
                            move(hit, drag, event);
                        });
                    }
                }

        }
问题是我需要变量hit与我选择的项目相等。
任何帮助都将不胜感激。

以下是如何使用多个项目进行拖放操作

在对象中定义了正方形：

var items=[]
items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});
因此，您可以点击下面的测试来检测哪些项将被拖动：

function setDragging(x,y){
    for(var i=0;i<items.length;i++){
        var item=items[i];

        // if x/y hit this item, set it’s isDragging flag
        if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
            item.isDragging=true;
        }

    }
}
然后，在draw（）函数中，可以处理拖动和非拖动项目

拖动的项目将在其原始位置加上dragX/dragY进行绘制

if(item.isDragging){
    ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
}else{
    ctx.rect(item.x,item.y,item.width,item.height);
}
下面是示例代码和提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isMouseDown=错误；
var-startX；
var startY；
var-dragX；
var dragY；
变量项=[]
推送（{x:0，y:10，宽度：50，高度：50，颜色：“红色”，IsDraging:false}）；
推送（{x:70，y:10，宽度：50，高度：50，颜色：“绿色”，IsDraging:false}）；
推送（{x:140，y:10，宽度：50，高度：50，颜色：“蓝色”，IsDraging:false}）；
draw（）；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；

for（var i=0；i
event.target
是拖动任何元素时目标下的对象。也许您可以获取对象的id或名称，并从move函数中的items数组传递其对应项

if(item.isDragging){
    ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
}else{
    ctx.rect(item.x,item.y,item.width,item.height);
}



<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var isMouseDown=false;
    var startX;
    var startY;
    var dragX;
    var dragY;

    var items=[]
    items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
    items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
    items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});

    draw();

    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(isMouseDown){

            }
            ctx.beginPath();
            if(item.isDragging){
                ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
            }else{
                ctx.rect(item.x,item.y,item.width,item.height);
            }
            ctx.fillStyle=item.color
            ctx.fill();
        }
    }


    function setDragging(x,y){
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
                item.isDragging=true;
            }
        }
    }

    function clearDragging(x,y){
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(item.isDragging){
                items[i].isDragging=false;
                item.x+=dragX;
                item.y+=dragY;
            }
        }
    }

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      startX=mouseX;
      startY=mouseY;
      setDragging(startX,startY);
      isMouseDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isMouseDown=false;
      clearDragging();
    }

    function handleMouseOut(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isMouseDown=false;
      clearDragging();
    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(isMouseDown){
          dragX=mouseX-startX;
          dragY=mouseY-startY;
          draw(mouseX,mouseY);
      }

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>