Javascript 如何绘制平行线图

我有这个[示例][1]，我想要的是得到这个结果[！[在这里输入图像描述][2]][2]

注:

a、 ）1和2将连接，而3将在第三次鼠标向下单击时生成

b、 ）1、2、3应连续声明

c、 ）1和2可延伸至宽度

d、 ）3应延伸至高度

e、 ）1,2,3应作为一个整体（一起）拖动

f、 声明的模式是1到2（水平）和2到3（垂直）

功能手柄鼠标向下（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
DragginIndex=-1；
对于（var i=0；i我认为，可以使用实际鼠标点的斜率。delta只使用一半

deltaX = (anchors[al - 1].x - anchors[al].x) / 2;
deltaY = (anchors[al - 1].y - anchors[al].y) / 2;
ctx.strokeStyle = 'purple';
ctx.beginPath();
ctx.moveTo(mouseX - deltaX, mouseY - deltaY);
ctx.lineTo(mouseX + deltaX, mouseY + deltaY);
ctx.stroke();

工作示例：


var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
cw=画布宽度，
ch=画布高度，
mouseX，mouseY，
offsetX，offsetY，
斯塔蒂，斯塔蒂，
半径=5，
nextLetter=0，
锚=[]，
连接器=[]，
DragginIndex=-1，
fullDrag=null；
reOffset（）；
window.onscroll=函数（e）{reOffset（）；}
window.onresize=函数（e）{reOffset（）；}
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
函数addAnchor（x，y）{
推({
x:x，
y:y，
});
}
draw（）；
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUpOut（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handlemouseuput（e）；}）；
$（“#清除”）。单击（函数（）{
clearRect（0，0，canvas.width，canvas.height）；
锚定=[]；
连接器=[]；
});
函数绘图（）{
var deltaX，deltaY；
var al=锚。长度-1；
//
ctx.clearRect（0，0，cw，ch）；
ctx.strokeStyle=‘黑色’；
//画连接线
对于（变量i=0；i0&&anchors.length%3>0）{
ctx.strokeStyle=‘灰色’；
var almod4=al%2；
if（almod4==1 | | almod4==2）{
//画额外的线
ctx.beginPath（）；
moveTo（锚[al-1].x，锚[al-1].y）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
//平行线零件
deltaX=（锚[al-1].x-锚[al].x）/2；
deltaY=（锚[al-1].y-锚[al].y）/2；
ctx.strokeStyle=‘紫色’；
ctx.beginPath（）；
ctx.moveTo（mouseX-deltaX，mouseY-deltaY）；
ctx.lineTo（mouseX+deltaX，mouseY+deltaY）；
ctx.stroke（）；
}
ctx.strokeStyle=‘灰色’；
ctx.beginPath（）；
移动到（锚[al].x，锚[al].y）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
}
//画圈
对于（var i=0；ideltaX = (anchors[al - 1].x - anchors[al].x) / 2;
deltaY = (anchors[al - 1].y - anchors[al].y) / 2;
ctx.strokeStyle = 'purple';
ctx.beginPath();
ctx.moveTo(mouseX - deltaX, mouseY - deltaY);
ctx.lineTo(mouseX + deltaX, mouseY + deltaY);
ctx.stroke();