@benson.liao/react-design-editor/lib/objects/DirectionalLine.js

Design Editor Tools with React.js + ant.design + fabric.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
const DirectionalLine = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
    type: 'directionalLine',
    superType: 'drawing',
    initialize(points, options) {
        if (!points) {
            const { x1, x2, y1, y2 } = options;
            points = [x1, y1, x2, y2];
        }
        options = options || {};
        this.callSuper('initialize', points, options);
    },
    _render(ctx) {
        this.callSuper('_render', ctx);
        ctx.save();
        const xDiff = this.x2 - this.x1;
        const yDiff = this.y2 - this.y1;
        const angle = Math.atan2(yDiff, xDiff) - (Math.PI / 2);
        ctx.rotate(angle);
        ctx.beginPath();
        // Move 10px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
        ctx.moveTo(10, 0);
        ctx.lineTo(-10, 10);
        ctx.lineTo(-10, -10);
        ctx.closePath();
        ctx.fillStyle = this.stroke;
        ctx.fill();
        ctx.restore();
    },
});
DirectionalLine.fromObject = (options, callback) => {
    const { x1, x2, y1, y2 } = options;
    return callback(new DirectionalLine([x1, y1, x2, y2], options));
};
// @ts-ignore
window.fabric.DirectionalLine = DirectionalLine;
exports.default = DirectionalLine;