angular - 如何在角度 4 中绘制箭头？

Question

请给我一些想法。如何以 4 角在画布上绘制箭头？与 fabric.js 库一起使用。我正在尝试这个，但三角形不旋转。这是用 angular8 编写的，但在此代码中存在一个问题。三角形不按箭头方向旋转。请给我一些想法。如何以 4 角在画布上绘制箭头？与 fabric.js 库一起使用。我正在尝试这个，但三角形不旋转。这是用 angular8 编写的，但在此代码中存在一个问题。三角形不按箭头方向旋转。请给我一些想法。如何以 4 角在画布上绘制箭头？与 fabric.js 库一起使用。我正在尝试这个，但三角形不旋转。这是用 angular8 编写的，但在此代码中存在一个问题。三角形不按箭头方向旋转。

this.canvas.on("mouse:down", (eve) => {

        var pointer = this.canvas.getPointer(eve.e);
        var linePositionX = pointer.x;
        var linePositionY = pointer.y;
        this.triangle = new fabric.Circle({
            radius: 2,


            left: linePositionX,
            top: linePositionY,

            originX: "center",
            originY: "center",

        });

        this.exitCirclePoint = new fabric.Triangle({

            width: 20,
            height: 10,

            stroke: 'orange',
            strokeWidth: 2,


            fill: "orange",
            left: linePositionX,
            top: linePositionY,

            originX: "center",
            originY: "center",

        });

        this.canvas.add(this.exitCirclePoint);

        this.exitCirclePointsArray.push(this.exitCirclePoint);

        if (
            this.exitCirclePointsArray.length > 1 &&
            this.exitCirclePointsArray.length < 3
        ) {
            var startPoint = this.exitCirclePointsArray[
                this.exitCirclePointsArray.length - 2
            ];
            var endPoint = this.exitCirclePointsArray[
                this.exitCirclePointsArray.length - 1
            ];

            var exitWaterLine = new fabric.Line(
                [
                    startPoint.get("left"),
                    startPoint.get("top"),
                    endPoint.get("left"),
                    endPoint.get("top"),
                ], {
                    stroke: "orange",
                    strokeWidth: 2,
                    hasControls: false,
                    hasBorders: false,


                    hoverCursor: "default",
                    originX: "center",
                    originY: "center",
                }
            );

            this.exitCircleLineArray.push(exitWaterLine);

            this.canvas.add(exitWaterLine);


        }
        if (this.exitCirclePointsArray.length == 1) {
            this.canvas.remove(this.exitCirclePoint);
            this.canvas.add(this.triangle);
        }
        if (this.exitCirclePointsArray.length > 2) {
            this.canvas.remove(this.exitCirclePoint);
            this.canvas.remove(exitWaterLine);
            this.exitCircleLineArray.length = 0;


        });

    this.canvas.renderAll();

标签： angular