在画布上的弯头连接器末端绘制箭头 [英] Draw arrow at the end of elbow connector on Canvas

问题描述

我已经实现了在画布上绘制的弯头连接器工具，弯头连接器工作正常，但我想在弯头连接器的末端显示箭头。我已经在行尾添加了箭头，但有些我怎么能够得到箭头末端的正确角度，当我的肘部连接器移动时，我的箭头一直保持旋转。可以请任何人帮忙。下面是我的代码。

I have implemented elbow connector tool to be drawn on canvas, the elbow connector is working properly however i want to show arrow at the end of elbow connector. I have added the arrow at the end of line but some how i am not able to get proper angle for arrow end and my arrow end keeps rotating as my elbow connector moves.Could anyone please help.Below is my code.

 var startPosX1, startPosY1, startPosX2 = "", startPosY2 = "", midPosX1, midPosY1;
function tool_elbowArrowConnect() {
    var tool = this;
    this.started = false;
    //cPush();
    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = startPosX1 = ev.offsetX;
        tool.y0 = startPosY1 = ev.offsetY;
        cPush();
    };

    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;
        //elbow connector logic
        if (curPosX > startPosX1) {
            midPosX1 = ((curPosX - startPosX1) / 2) + startPosX1;
        }
        else if (startPosX > curPosX) {
            midPosX1 = ((startPosX1 - curPosX) / 2) + curPosX;
        }

        if (curPosY > startPosY1) {
            midPosY1 = ((curPosY - startPosY1) / 2) + startPosY1;
        }
        else if (startPosY1 > curPosY) {
            midPosY1 = ((startPosY1 - curPosY) / 2) + curPosY;
        }

        //Line 1
        context.beginPath();
        context.moveTo(startPosX1, startPosY1);
        context.lineTo(midPosX1, startPosY1);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line2
        context.beginPath();
        context.moveTo(midPosX1, startPosY1);
        context.lineTo(midPosX1, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line3
        context.beginPath();
        context.moveTo(midPosX1, curPosY);
        context.lineTo(curPosX, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();

        if (midPosX1 != undefined && startPosX2 == "" && startPosY2 == "") {
            startPosX2 = midPosX1;
            startPosY2 = curPosY;
        }

        //  context.closePath();

        if (startPosX2 != ev.offsetX && startPosY2 != ev.offsetY) {
            var radianAngle = Math.atan((ev.offsetY - startPosY2) / (ev.offsetX - startPosX2));
            radianAngle += ((ev.offsetX > startPosX2) ? 90 : -90) * Math.PI / 180;
            drawArrowhead(ev.offsetX, ev.offsetY, radianAngle, context);
        }

    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
            img_update();
        }
    };

}

function drawArrowhead(x, y, radians, ctx) {
    // context.clearRect(x - 5, y - 5, 10, 10);
    ctx.save();
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.rotate(radians);
    ctx.moveTo(0, 0);
    ctx.lineTo(6, 10);
    ctx.lineTo(-6, 10);
    ctx.closePath();
    ctx.restore();
    ctx.fillStyle = strokeColor;
    ctx.fill();
}

推荐答案

var startPosX1, startPosY1,  midPosX1, midPosY1;
function tool_elbowArrowConnect() {
    var tool = this;
    this.started = false;
    //cPush();
    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = startPosX1 = ev.offsetX;
        tool.y0 = startPosY1 = ev.offsetY;
        cPush();
    };

    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;
        //elbow connector logic
        if (curPosX > startPosX1) {
            midPosX1 = ((curPosX - startPosX1) / 2) + startPosX1;
        }
        else if (startPosX > curPosX) {
            midPosX1 = ((startPosX1 - curPosX) / 2) + curPosX;
        }

        if (curPosY > startPosY1) {
            midPosY1 = ((curPosY - startPosY1) / 2) + startPosY1;
        }
        else if (startPosY1 > curPosY) {
            midPosY1 = ((startPosY1 - curPosY) / 2) + curPosY;
        }

        //Line 1
        context.beginPath();
        context.moveTo(startPosX1, startPosY1);
        context.lineTo(midPosX1, startPosY1);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line2
        context.beginPath();
        context.moveTo(midPosX1, startPosY1);
        context.lineTo(midPosX1, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line3
        context.beginPath();
        context.moveTo(midPosX1, curPosY);
        context.lineTo(curPosX, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();


        drawArrowhead1(midPosX1, curPosY, curPosX, curPosY);

    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
            img_update();
        }
    };

}

var PI2 = Math.PI * 2;
function drawArrowhead1(x1, y1, x2, y2) {
    var dx = x2 - x1;
    var dy = y2 - y1;
    var radians = (Math.atan2(dy, dx) + PI2) % PI2;
    context.save();
    context.lineWidth = 2;
    context.beginPath();
    context.translate(x2, y2);
    context.rotate(radians);
    context.moveTo(0, 0);
    context.lineTo(-10, 6);
    context.lineTo(-10, -6);
    context.closePath();
    context.fillStyle = strokeColor;
    context.fill();
    context.restore();
}

这篇关于在画布上的弯头连接器末端绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！