How to use the fabric.fabric.Polygon 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 bfortuner / labelml / src / components / Editor.vue View on Github external
makePolygon: function() {
      console.log("Saving active polygon");
      let coords = [];
      let click, x, y;
      for (let id of this.polygonClicks) {
        click = this.getObjectById(id);
        coords.push({
          'x': click.left + click.radius,
          'y': click.top + click.radius
        })
      }
      let polygon = new fabric.Polygon(coords, {
        id: this.getRandId(),
        annoId: this.getRandId(),
        label: this.getCurLabel(),
        fill: this.getColor(),
        selectable: false,
        objectCaching: false,
        opacity: 0.3,
        hasControls: false,
        hasBorders: true,
        borderColor: 'white',
        cornerStyle: 'circle',
        cornerColor: 'white',
        cornerSize: 3,
        labelType: POLYGON_LABEL,
        score: 1.0,
        points: this.makePointsFromCoords(coords),
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
componentDidMount() {
    console.log('componentDidMount');
    const { width, height } = this.props;
    const page = new fabric.StaticCanvas(this.refs.canvas, {
      width,
      height,
    });

    let hexagon1 = new fabric.Polygon(points, assign({}, commonCfg, {
      left: 100,
      top: 160,
    }));

    let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

    let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
componentDidMount() {
    console.log('componentDidMount');
    const { width, height } = this.props;
    const page = new fabric.StaticCanvas(this.refs.canvas, {
      width,
      height,
    });

    let hexagon1 = new fabric.Polygon(points, assign({}, commonCfg, {
      left: 100,
      top: 160,
    }));

    let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

    let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon5 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon5 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 56,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon6 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 160,
      strokeWidth: 1,
      opacity: 0,
    }));

    let line1 = new fabric.Line(deepcopy(linePts), {
      stroke: 'white',
      originX: 'center',
      strokeWidth: 2,
      top: 50,
      left: 0,
    });

    let line2 = new fabric.Line(deepcopy(linePts), {
      stroke: 'white',
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

    let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon5 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 56,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon6 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 160,
      strokeWidth: 1,
      opacity: 0,
    }));

    let line1 = new fabric.Line(deepcopy(linePts), {
      stroke: 'white',
      originX: 'center',
github slidewiki / slidewiki-platform / components / Paint / PaintModal.js View on Github external
addArrow() {
        let points = [
            {x: 0, y: 20},
            {x: 60, y: 20},
            {x: 60, y: 10},
            {x: 80, y: 40},
            {x: 60, y: 70},
            {x: 60, y: 60},
            {x: 0, y: 60},
            {x: 0, y: 20}
        ];

        this.canvas.add(new fabric.Polygon(points, {
            left: 30,
            top: 30,
            fill: this.primaryColor,
            stroke: this.secondaryColor,
            opacity: this.transparency,
            strokeWidth: this.canvas.freeDrawingBrush.width
        }));
    }
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
});

    let hexagon1 = new fabric.Polygon(points, assign({}, commonCfg, {
      left: 100,
      top: 160,
    }));

    let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

    let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon5 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 56,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon6 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 160,
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
width,
      height,
    });

    let hexagon1 = new fabric.Polygon(points, assign({}, commonCfg, {
      left: 100,
      top: 160,
    }));

    let hexagon2 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 490,
      top: -108,
      opacity: 0,
    }));

    let hexagon3 = new fabric.Polygon(deepcopy(points), commonCfg);

    let hexagon4 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 70,
      top: 108,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon5 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {
      left: 160,
      top: 56,
      strokeWidth: 1,
      opacity: 0,
    }));

    let hexagon6 = new fabric.Polygon(deepcopy(points), assign({}, commonCfg, {