javascript - 在 html 5 Canvas 中连接 4 个圆圈图案

Question

目前我有这个代码jsfiddle

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

这是我需要实现的场景:

在一个区域上左键单击然后它将成为点 A。

点击其他区域则为B点。

A点和B点可以相连。

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

添加点 D，它将连接到点 B 和 C。

点可以拖动但仍然相连

如何实现连接线？并使它们能够被拖动

 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 中，根据自上次按下鼠标以来鼠标移动的量更改圆圈的位置。

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

示例代码:

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();
}

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

<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>