How to use the fabric.fabric.Line 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 0123cf / together-draw / src / index.js View on Github external
function drawing() {
            let canvasObject = null
            // console.log(drawType)
            // console.log(drawWidth)
            if (drawType == 'handle') {
                return
            }
            // 清理历史滑动痕迹
            if (drawingObject) {
                canvas.remove(drawingObject)
            }
            switch (drawType) {
                case "line": {
                    canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
                        stroke: color,
                        strokeWidth: drawWidth
                    })
                    break
                }
                case "rectangle": {
                    let left = mouseFrom.x,
                        top = mouseFrom.y,
                        width = mouseTo.x - mouseFrom.x,
                        height = mouseTo.y - mouseFrom.y

                    canvasObject = new fabric.Rect({
                        left: width > 0 ? left : left + width,
                        top: height > 0 ? top : top + height,
                        width: Math.abs(width),
                        height: Math.abs(height),
github bfortuner / labelml / src / components / Editor.vue View on Github external
makePolygonLine: function(startCircle, endCircle) {
      let coords = [
        startCircle.left + startCircle.radius, 
        startCircle.top + startCircle.radius, 
        endCircle.left + endCircle.radius, 
        endCircle.top + endCircle.radius
      ]
      //console.log("coords", coords);
      return new fabric.Line(coords, {
        id: this.getRandId(),
        fill: 'white',
        stroke: 'white',
        strokeWidth: 1,
        selectable: false,
        hasControls: false,
        labelType: POLY_LINE_LABEL,
        score: 1.0,
        //https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=context-menu
        hoverCursor: 'default',
      });
    },
github salt-ui / saltui / site / theme / template / component / Banner.jsx View on Github external
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',
      strokeWidth: 2,
      originX: 'center',
      angle: -60,
      top: 28,
      left: 35,
    });

    let group1 = new fabric.Group([hexagon3, line1, line2], {
      left: 490,
      top: 400,
      originX: 'center',
      originY: 'center',
    });
    page.add(hexagon1, hexagon2, hexagon4, hexagon5, hexagon6, group1);
github fredgreer / footprinter / src / shapes / newScaleBar.js View on Github external
function makeLine(coords) {
  return new fabric.Line(coords, {
    fill: 'black',
    stroke: 'black',
    strokeWidth: 2,
    selectable: false,
    evented: false
  });
}
github tbolis / react-sketch / src / line.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
    });
    canvas.add(this.line);
  }
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,
github JithinKS97 / dynamic-learning / imports / ui / components / workbook / DrawingBoardCmp.jsx View on Github external
this.started = true;
      this.newObject = new fabric.Ellipse({
        left: e.pointer.x,
        top: e.pointer.y,
        rx: 0,
        ry: 0,
        fill: selectedFill,
        stroke: selectedStroke,
        strokeWidth: size,
        selectable: false,
        hoverCursor: 'default',
      });
      this.b.add(this.newObject);
    } else if (option === 'line') {
      this.started = true;
      this.newObject = new fabric.Line([e.pointer.x, e.pointer.y, e.pointer.x, e.pointer.y], {
        strokeWidth: size,
        stroke: selectedStroke,
        originX: 'center',
        originY: 'center',
        selectable: false,
        hoverCursor: 'default',
      });

      this.b.add(this.newObject);
    }
  };
github pastelsky / bundlephobia / utils / draw.utils.js View on Github external
const canvas = new fabric.StaticCanvas('c', {
    backgroundColor: selectedTheme.backgroundColor,
    width: wide ? width + wideBy : width,
    height: height
  })

  const x0 = wide ? wideBy / 2 : 0

  const separatorOptions = {
    stroke: selectedTheme.separatorColor,
    strokeWidth: 0.5,
    opacity: selectedTheme.separatorOpacity,
  }

  const lineTopHorizontal = new fabric.Line([x0, 91, width, 91], separatorOptions)
  const lineCenterVertical = new fabric.Line(
    [width / 2, 91, width / 2, height],
    separatorOptions,
  )
  const lineCenterHorizontal = new fabric.Line(
    [x0, 91 + (height - 91) / 2, width, 91 + (height - 91) / 2],
    separatorOptions,
  )

  const packageNameText = new fabric.Text(name, {
    fontFamily: 'Source Code Pro',
    fontSize: 45,
    fill: selectedTheme.nameColor,
    opacity: 0.8,
    top: 19,
  })
github pastelsky / bundlephobia / utils / draw.utils.js View on Github external
})

  const x0 = wide ? wideBy / 2 : 0

  const separatorOptions = {
    stroke: selectedTheme.separatorColor,
    strokeWidth: 0.5,
    opacity: selectedTheme.separatorOpacity,
  }

  const lineTopHorizontal = new fabric.Line([x0, 91, width, 91], separatorOptions)
  const lineCenterVertical = new fabric.Line(
    [width / 2, 91, width / 2, height],
    separatorOptions,
  )
  const lineCenterHorizontal = new fabric.Line(
    [x0, 91 + (height - 91) / 2, width, 91 + (height - 91) / 2],
    separatorOptions,
  )

  const packageNameText = new fabric.Text(name, {
    fontFamily: 'Source Code Pro',
    fontSize: 45,
    fill: selectedTheme.nameColor,
    opacity: 0.8,
    top: 19,
  })

  const packageAtText = new fabric.Text('@', {
    fontFamily: 'Source Code Pro',
    fontSize: 35,
    fill: '#91D396',