How to use the fabric.fabric.Triangle function in fabric

To help you get started, we’ve selected a few fabric examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nhn / tui.image-editor / test / graphics.spec.js View on Github external
it('removes a object or group by id', () => {
        const triangle = new fabric.Triangle({
            width: 20,
            height: 30
        });

        graphics.add(triangle);
        const objectId = snippet.stamp(triangle);
        graphics.removeObjectById(objectId);
        expect(graphics.getObjects().length).toBe(0);
    });
github nhn / tui.image-editor / test / graphics.spec.js View on Github external
it('deactivates all objects', () => {
        const triangle = new fabric.Triangle({
            width: 20,
            height: 30
        });

        canvas.add(triangle).setActiveObject(triangle);
        expect(canvas.getActiveObject()).not.toBe(null);
        graphics.deactivateAll();
        expect(canvas.getActiveObject()).toBe(null);
    });
github nhn / tui.image-editor / test / graphics.spec.js View on Github external
it('renders objects', done => {
        let beforeRender = false;
        const triangle = new fabric.Triangle({
            width: 20,
            height: 30
        });

        canvas.add(triangle);
        canvas.on('before:render', () => {
            beforeRender = true;
        });
        canvas.on('after:render', () => {
            expect(beforeRender).toBe(true);
            done();
        });
        graphics.renderAll();
    });
github slidewiki / slidewiki-platform / components / Paint / PaintModal.js View on Github external
addTriangle() {
        let coord = {left: 10, top: 10};

        this.canvas.add(new fabric.Triangle({
            left: coord.left,
            top: coord.top,
            fill: this.primaryColor,
            width: 50,
            height: 50,
            opacity: this.transparency,
            stroke: this.secondaryColor,
            strokeWidth: this.canvas.freeDrawingBrush.width
        }));
    }
github nhn / tui.image-editor / src / js / component / shape.js View on Github external
_createInstance(type, options) {
        let instance;

        switch (type) {
            case 'rect':
                instance = new fabric.Rect(options);
                break;
            case 'circle':
                instance = new fabric.Ellipse(extend({
                    type: 'circle'
                }, options));
                break;
            case 'triangle':
                instance = new fabric.Triangle(options);
                break;
            default:
                instance = {};
        }

        return instance;
    }
github tbolis / react-sketch / src / arrow.js View on Github external
doMouseDown(o) {
    this.isDown = true;
    let canvas = this._canvas;
    var pointer = canvas.getPointer(o.e);
    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    this.line = new fabric.Line(points, {
      strokeWidth: this._width,
      fill: this._color,
      stroke: this._color,
      originX: 'center',
      originY: 'center',
      selectable: false,
      evented: false
    });

    this.head = new fabric.Triangle({
      fill: this._color,
      left: pointer.x,
      top: pointer.y,
      originX: 'center',
      originY: 'center',
      height: 3 * this._width,
      width: 3 * this._width,
      selectable: false,
      evented: false,
      angle: 90
    });

    canvas.add(this.line);
    canvas.add(this.head);
  }