我有[样本] [1]，我想要的是这个结果[！[在此输入图像描述] [2]] [2]
注意：
a。）1和2将连接，而3将在第三个mousedown点击中生成。
b。）1,2,3应该连续宣布。
c。）1和2可以延伸宽度
d。）3应该延伸到高度。
e。）1,2,3应该作为一个整体拖动（全部在一起）。
f。）声明的模式是1到2（水平）和2到3（垂直）。
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;
}
}
//Detect if we're on a line:
fullDrag = mouseOnLine({x:startX, y: startY});
// If a drag hasn't started, add another anchor here
if(draggingIndex==-1 && fullDrag == null){
addAnchor(startX,startY);
var al = anchors.length-1;
var almod4 = al%2;
if(almod4==1){
connectors.push({start:al-1,end:al});
}
if(almod4==2){
connectors.push({start:al-2,end:al});
connectors.push({start:al-1,end:al});
}
draw();
}
}
答案 0 :(得分：0)
我认为，您可以使用实际鼠标点的斜率。 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 = canvas.width,
ch = canvas.height,
mouseX, mouseY,
offsetX, offsetY,
startX, startY,
radius = 5,
nextLetter = 0,
anchors = [],
connectors = [],
draggingIndex = -1,
fullDrag = null;
reOffset();
window.onscroll = function (e) { reOffset(); }
window.onresize = function (e) { reOffset(); }
function reOffset() {
var BB = canvas.getBoundingClientRect();
offsetX = BB.left;
offsetY = BB.top;
}
function addAnchor(x, y) {
anchors.push({
x: x,
y: y,
});
}
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); });
$("#clear").click(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
anchors = [];
connectors = [];
});
function draw() {
var deltaX, deltaY;
var al = anchors.length - 1;
//
ctx.clearRect(0, 0, cw, ch);
ctx.strokeStyle = 'black';
// 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();
//alert(anchors.length);
}
//draw lines
if (anchors.length > 0 && anchors.length % 3 > 0) {
ctx.strokeStyle = 'grey';
var almod4 = al % 2;
if (almod4 == 1 || almod4 == 2) {
//draw extra line
ctx.beginPath();
ctx.moveTo(anchors[al - 1].x, anchors[al - 1].y);
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
// part for parallel line
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();
}
ctx.strokeStyle = 'grey';
ctx.beginPath();
ctx.moveTo(anchors[al].x, anchors[al].y);
ctx.lineTo(mouseX, mouseY);
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();
}
}
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;
}
}
//Detect if we're on a line:
fullDrag = mouseOnLine({ x: startX, y: startY });
// If a drag hasn't started, add another anchor here
if (draggingIndex == -1 && fullDrag == null) {
addAnchor(startX, startY);
var al = anchors.length - 1;
var almod4 = al % 2;
if (almod4 == 1) {
connectors.push({ start: al - 1, end: al });
}
if (almod4 == 2) {
connectors.push({ start: al - 2, end: al });
connectors.push({ start: al - 1, end: al });
}
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;
fullDrag = null;
}
function handleMouseMove(e) {
//if(draggingIndex<0 && fullDrag == null){return;}
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (draggingIndex >= 0) {
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
var a = anchors[draggingIndex];
a.x += (mouseX - startX);
a.y += (mouseY - startY);
startX = mouseX;
startY = mouseY;
} else if (fullDrag != null) {
var startPoints = Math.floor(fullDrag.start / 4) * 4;
for (var i = 0; i < 2; i++) {
anchors[startPoints + i].x += (mouseX - startX);
anchors[startPoints + i].y += (mouseY - startY);
}
startX = mouseX;
startY = mouseY;
}
draw();
}
function mouseOnLine(mousePos) {
var i, pA, pB, first, second;
for (i = 0 ; i < connectors.length; i++) {
pA = anchors[connectors[i].start];
pB = anchors[connectors[i].end];
first = distanceBetween(pA, mousePos) + distanceBetween(pB, mousePos);
second = distanceBetween(pA, pB);
if (Math.abs(first - second) < 0.3) {
return connectors[i];
}
}
return null;
}
var distanceBetween = function (point1, point2) {
var distX = Math.abs(point1.x - point2.x);
var distY = Math.abs(point1.y - point2.y);
return Math.sqrt((distX * distX) + (distY * distY));
}#canvas{border:1px solid red; }<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<canvas id="canvas" width=500 height=500></canvas>