在html 5画布中连接4个圆圈图案

Question

目前我有这段代码jsfiddle

创建4个圆圈，然后将其连接到最后一个圆圈。

以下是我需要实施的方案：

左键单击某个区域，然后它将是A点。

单击其他区域，然后它将是B点。

可以连接A点和B点。

添加将连接到A点和B点的C点。

添加将连接到B点和C点的点D.

点可以拖动但仍然连接

如何实现连接线？并使它们可以拖动

 function drawCircle(cx,cy){
 if(lastX){
 ctx.globalCompositeOperation='destination-over';
 ctx.beginPath();
 ctx.moveTo(lastX,lastY);
 ctx.lineTo(cx,cy);
 ctx.stroke();
 ctx.globalCompositeOperation='source-over';
 }

 ctx.beginPath();
 ctx.arc(cx,cy,radius,0,Math.PI*2);
 ctx.closePath();
 ctx.fill();

 }

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  if(i<4)
  {
     i++;
     drawCircle(mx,my);
  }
  lastX=mx;
  lastY=my;
}

Answer 1

您可以测试鼠标是否位于您的某个圆点内：

var dx=mouseX-circleCenterX;
var dy=mouseY-circleCenterY;
if(dx*dx+dy*dy<circleRadius*circleRadius){
    // the mouse is inside the circle
}

如果鼠标位于您的一个字母圆圈内，则用户想要拖动该圆圈。所以在mousemove中，用自上次mousedown后鼠标移动的数量改变圆圈的位置。

如果鼠标不在您的一个字母圆圈内，则用户想要添加一个新圆圈。因此，在包含所有用户圆点的数组中添加一个新的圆点。

示例代码：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var startX,startY;

var radius=5;
var nextLetter=65;
var anchors=[];
var connectors=[];
var draggingIndex=-1;
function addAnchor(x,y){
  anchors.push({
    label:String.fromCharCode(nextLetter),
    x:x,
    y:y,
  });
  nextLetter++;
}

draw();

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


function draw(){

  //
  ctx.clearRect(0,0,cw,ch);

  // draw connecting lines
  for(var i=0;i<connectors.length;i++){
    var c=connectors[i];
    var s=anchors[c.start];
    var e=anchors[c.end];
    ctx.beginPath();
    ctx.moveTo(s.x,s.y);
    ctx.lineTo(e.x,e.y);
    ctx.stroke();
  }   

  // draw circles
  for(var i=0;i<anchors.length;i++){
    ctx.beginPath();
    ctx.arc(anchors[i].x,anchors[i].y,radius,0,Math.PI*2);
    ctx.fill(); 
    ctx.fillText(anchors[i].label,anchors[i].x-5,anchors[i].y-15); 
  }

}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  draggingIndex=-1;
  for(var i=0;i<anchors.length;i++){
    var a=anchors[i];
    var dx=startX-a.x;
    var dy=startY-a.y;
    if(dx*dx+dy*dy<radius*radius){
      draggingIndex=i;
      break;
    }
  }

  // If a drag hasn't started, add another anchor here
  if(draggingIndex==-1){
    addAnchor(startX,startY);
    if(anchors.length>1){
      connectors.push({
        start:anchors.length-2,
        end:anchors.length-1
      });
    }
    draw();
  }

}

function handleMouseUpOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

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

  draggingIndex=-1;
}


function handleMouseMove(e){

  if(draggingIndex<0){return;}

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

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

  var a=anchors[draggingIndex];
  a.x+=(mouseX-startX);
  a.y+=(mouseY-startY);
  startX=mouseX;
  startY=mouseY;          
  draw();
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click to add points. Existing points are draggable.</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;