How to use the fabric.fabric.Text 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 pastelsky / bundlephobia / utils / draw.utils.js View on Github external
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',
    left: packageNameText.width + pad * 2,
    top: 24,
  })

  // packageAtText.top =
github apache / incubator-nemo / webui / components / jobs / detail / DAG.vue View on Github external
radius: VERTEX_DOT_RADIUS,
            left: vertex.x,
            top: vertex.y,
            originX: 'center',
            originY: 'center',
            fill: 'black',
            hasControls: false,
            hasRotatingPoint: false,
            lockMovementX: true,
            lockMovementY: true,
          });

          // let top = vertex.label.length > 10 ?
          //   vertex.y + (vertex.height * 5 / 12) : vertex.y + (vertex.height * 7 / 24);
          let top = vertex.y + (vertex.height * 7 / 24);
          let vertexLabelObj = new fabric.Text(vertex.label, {
            left: vertex.x,
            top: top,
            fontSize: VERTEX_FONT_SIZE,
            originX: 'center',
            originY: 'center',
            metricId: vertex.id,
            selectable: false,
          });
          this.vertexTextObjects.push(vertexLabelObj);

          this.vertexObjects[vertex.label] = vertexCircle;
          this.stageInnerObjects[stageId].push(vertexCircle);
          this.stageInnerObjects[stageId].push(vertexLabelObj);
          objectArray.push(vertexCircle);
          objectArray.push(vertexLabelObj);
        });
github nhn / tui.image-editor / test / text.spec.js View on Github external
it('_onFabricScaling() should change size of selected text object.', () => {
        const obj = new fabric.Text('test');
        const mock = {
            target: obj
        };
        const scale = 10;
        const originSize = obj.getFontSize();

        text.start({});

        canvas.add(obj);
        obj.setScaleY(scale);

        canvas.fire('object:scaling', mock);

        expect(obj.getFontSize()).toEqual(originSize * scale);
    });
github shyiko / canvas-text-opentypejs-shim / demo / demo-runkit-fabric.js View on Github external
.then(() => {
    const font = opentype.loadSync('OpenSans-Regular.ttf')

    const ctx = fabric.createCanvasForNode(200, 200)
    const shimConfig = {
      resolveFont: function (o) {
        if (splitFontFamily(o.fontFamily)[0] === 'Open Sans') {
          return font
        }
      }
    }

    ctx.add(new fabric.Text('Hello World', {
      left: -0.5, top: -0.5, fontFamily: 'Open Sans', fontSize: 26,
      openTypeJsShimConfig: shimConfig
    }))

    console.log(`<img src="${ctx.toDataURL()}">`)
  })
github pastelsky / bundlephobia / utils / draw.utils.js View on Github external
fontWeight: 'bold',
      opacity: selectedTheme.numberOpacity,
    })

    const unitText = new fabric.Text(unit, {
      fontFamily: 'SF Compact Text',
      fontSize: 35,
      fill: selectedTheme.unitColor,
      fontWeight: 'bold',
      opacity: selectedTheme.unitOpacity,
      left: numberText.width + pad / 2,
    })

    unitText.top = numberText.top + numberText.height - unitText.height - pad

    const labelText = new fabric.Text(label, {
      fontFamily: 'SF Compact Text',
      fontSize: 25,
      fontWeight: 100,
      fill: selectedTheme.labelColor,
      opacity: selectedTheme.labelOpacity,
      top: numberText.height,
      left: (numberText.width + unitText.width) / 2,
      originX: 'center',
    })

    return new fabric.Group([numberText, unitText, labelText], opts)
  }
github fredgreer / footprinter / src / shapes / newPad.js View on Github external
export default function newPad(pinNum = '1', left, top, width, height) {
  const rect = new fabric.Rect({
    width: width,
    height: height,
    fill: 'red'
  });

  const label = new fabric.Text('', {
    left: width / 2,
    top: height / 2,
    fontFamily: 'Arial',
    textAlign: 'center',
    originX: 'center',
    originY: 'center',
    fixedWidth: width
  });

  const group = new fabric.Group([rect, label], {
    left,
    top,
    originX: 'center',
    originY: 'center',
    minScaleLimit: 0.1,
    lockScalingFlip: true,
github nhn / tui.image-editor / src / js / component / text.js View on Github external
let styles = this._defaultStyles;

            this._setInitPos(options.position);

            if (options.styles) {
                styles = snippet.extend(styles, options.styles);
            }

            if (this.useItext) {
                newText = new fabric.IText(text, styles);
                selectionStyle = snippet.extend({}, selectionStyle, {
                    originX: 'left',
                    originY: 'top'
                });
            } else {
                newText = new fabric.Text(text, styles);
            }

            newText.set(selectionStyle);
            newText.on({
                mouseup: this._onFabricMouseUp.bind(this)
            });

            canvas.add(newText);

            if (!canvas.getActiveObject()) {
                canvas.setActiveObject(newText);
            }

            this.isPrevEditing = true;
            resolve(this.graphics.createObjectProperties(newText));
        });
github pastelsky / bundlephobia / utils / draw.utils.js View on Github external
function createStatGroup(number, unit, label, opts) {
    const numberText = new fabric.Text(number.toString(), {
      fontFamily: 'SF Compact Text',
      fontSize: 55,
      fill: selectedTheme.numberColor,
      fontWeight: 'bold',
      opacity: selectedTheme.numberOpacity,
    })

    const unitText = new fabric.Text(unit, {
      fontFamily: 'SF Compact Text',
      fontSize: 35,
      fill: selectedTheme.unitColor,
      fontWeight: 'bold',
      opacity: selectedTheme.unitOpacity,
      left: numberText.width + pad / 2,
    })