Question

假设我在画布上绘制了两个矩形。那些是可以拖延的。是否有可能创建一条连接到这两个形状的线条，这些线条本身不会拖曳，但如果其中一个形状的位置发生变化，它的位置会发生变化。

所以例如我的形状在它们之间有一条线，我移动其中一个形状，但线也在移动，因为它仍然连接这两个形状。

Answer 1

以下是如何将2个可拖动的矩形与一条线连接。

只需从一个形状的中心到另一个形状的中心画一条线。

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var startX;
var startY;
var isDown=false;
var dragTarget;

var boxes=[];
boxes.push({x:50,y:25,w:75,h:50});    // x,y,width,height
boxes.push({x:200,y:100,w:50,h:50});


var connectors=[];
connectors.push({box1:0,box2:1});

draw();

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

function draw(){

  // clear the canvas
  ctx.clearRect(0,0,canvas.width,canvas.height);

  for(var i=0;i<boxes.length;i++){
    var box=boxes[i];
    ctx.fillRect(box.x,box.y,box.w,box.h);
  }
  for(var i=0;i<connectors.length;i++){
    var connector=connectors[i];
    var box1=boxes[connector.box1];
    var box2=boxes[connector.box2];
    ctx.beginPath();
    ctx.moveTo(box1.x+box1.w/2,box1.y+box1.h/2);
    ctx.lineTo(box2.x+box2.w/2,box2.y+box2.h/2);
    ctx.stroke();
  }

}

function hit(x,y){
  for(var i=0;i<boxes.length;i++){
    var box=boxes[i];
    if(x>=box.x && x<=box.x+box.w && y>=box.y && y<=box.y+box.h){
      dragTarget=box;
      return(true);
    }
  }
  return(false);
}

function handleMouseDown(e){
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  isDown=hit(startX,startY);
}

function handleMouseUp(e){
  // Put your mouseup stuff here
  dragTarget=null;
  isDown=false;
}

function handleMouseOut(e){
  handleMouseUp(e);
}

function handleMouseMove(e){
  if(!isDown){return;}

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousemove stuff here
  var dx=mouseX-startX;
  var dy=mouseY-startY;
  startX=mouseX;
  startY=mouseY;
  dragTarget.x+=dx;
  dragTarget.y+=dy;
  draw();
}

＆＃13;

#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Drag the rectangles</p>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

Answer 2

使用HTML5画布没有内置的方法。

但是，您可以手动编写这样的系统。您可以将矩形和线存储为知道如何在画布上呈现自身的JavaScript对象。然后，您将在画布上安装鼠标事件处理程序。

按下鼠标时，您将存储鼠标光标的位置。
移动鼠标时，您将根据新鼠标位置与存储位置之间的差异更新存储对象的位置，然后重新渲染画布。
释放鼠标时，您将放弃存储的鼠标位置。

创建连接到其他形状的画布形状

2 个答案: