I am trying to imitate elbow connector tool in MS Word to allow user to draw same on my canvas.However my elbow connector is not dancing like the one in MS Word, also there is option in Word to drag the shape from middle line.Has anyone done something like this before? Below is what i have coded so far.
var startPosX, startPosY, midPosX, midPosY;
function tool_elbowConnect() {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = startPosX = ev.offsetX;
tool.y0 = startPosY = ev.offsetY;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = strokeColor;
var curPosX, curPosY;
curPosX = ev.offsetX;
curPosY = ev.offsetY;
if (curPosX > startPosX) {
midPosX = ((curPosX - startPosX) / 2) + startPosX;
}
else if (startPosX > curPosX) {
midPosX = ((startPosX - curPosX) / 2) + curPosX;
}
if (curPosY > startPosY) {
midPosY = ((curPosY - startPosY) / 2) + startPosY;
}
else if (startPosY > curPosY) {
midPosY = ((startPosY - curPosY) / 2) + curPosY;
}
drawElbowConnect(startPosX, startPosY, midPosX, curPosX, curPosY, strokeColor)
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
addCircuitTag(ev.offsetY, ev.offsetX);
img_update();
}
};
}
function drawElbowConnect(startPosX, startPosY, midPosX, curPosX, curPosY, strokeColor,isArrowHead) {
context.beginPath();
context.moveTo(startPosX, startPosY);
context.lineTo(midPosX, startPosY);
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(midPosX, startPosY);
context.lineTo(midPosX, curPosY);
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(midPosX, curPosY);
context.lineTo(curPosX, curPosY);
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
}