How to use the fabric.fabric.IText 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 FelixHenninger / lab.js / packages / builder / src / components / ComponentOptions / components / Content / Canvas / components / fabric / index.js View on Github external
return new fabric.Triangle({
            width: 2 * 50 * Math.sqrt(1/3),
            height: 50,
            ...defaults,
            ...options,
          })
        case 'rect':
          return new fabric.Rect({
            width: 50, height: 50,
            ...defaults,
            ...options,
          })
        case 'text':
          const content = options.content
          delete options.content
          return new fabric.IText(content, {
            fontSize: 32,
            textAlign: 'center',
            ...defaults,
            ...options,
          })
        case 'image':
          const placeholderMatch = options.src.match(filePlaceholderRegex)
          if (placeholderMatch) {
            // Save original placeholder-based path
            options._src = options.src
            options.src = getLocalFile(
              this.context.store,
              this.context.id,
              placeholderMatch[1]
            ).file.content
          }
github slidewiki / slidewiki-platform / components / Paint / PaintModal.js View on Github external
addText(){
        //let text = 'Insert your text\n   here';

        let textSample = new fabric.IText('Insert your text\n   here', {
            left: 55,
            top: 30,
            fontFamily: 'helvetica',
            angle: 0,
            fill: this.primaryColor,
            scaleX: 0.5,
            scaleY: 0.5,
            fontWeight: '',
            originX: 'left',
            hasRotatingPoint: true,
            centerTransform: true
        });

        this.canvas.add(textSample);
        this.canvas.renderAll();
github reactioncommerce / reaction / imports / plugins / custom / boxycard-reaction-homepage / client / ui / User / pages / EditorPage / EditorPage.js View on Github external
addText() {
    const text = new fabric.IText('Text', {
      left: (highResCanvasWidth / 8),
      top: (highResCanvasHeight / 2) - highResBleedingEdge,
      fontFamily: 'helvetica',
      fontSize: 12 * highResMultiplier,
      lineHeight: 1,
      fill: 'rgb(35, 31, 32)',
      scaleX: 1,
      scaleY: 1,
      fontWeight: '',
      originX: 'center',
      originY: 'center',
      hasRotatingPoint: true,
      centerTransform: true,
      cornerSize: CORNER_SIZE,
    });
github tbolis / react-sketch / src / SketchField.jsx View on Github external
addText = (text, options = {}) => {
    let canvas = this._fc;
    let iText = new fabric.IText(text, options);
    let opts = {
      left: (canvas.getWidth() - iText.width) * 0.5,
      top: (canvas.getHeight() - iText.height) * 0.5,
    };
    Object.assign(options, opts);
    iText.set({
      'left': options.left,
      'top': options.top
    });

    canvas.add(iText);
  };
github nhn / tui.image-editor / src / js / component / text.js View on Github external
return new Promise(resolve => {
            const canvas = this.getCanvas();
            let newText = null;
            let selectionStyle = consts.fObjectOptions.SELECTION_STYLE;
            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()) {