fabric.js : 6.3.0 : How to register custom class (created by extending the fabric object) to the fabric.

[niketaOptimumnbrew]

Hello,

I have created a custom class using createClass, but it has been removed in the latest version, so I am now creating it with extend. I have created the class with extend, but the problem is that I need to export that class and use it like this: new customclass();

I want to use it like fabric.customclass();

I've created js file for custom class and imported custom class in ts file of angular.
Here is the code that I've done:

`import * as fabric from 'fabric';

export class CurvedText extends fabric.FabricObject {
static type = 'curved-text';

constructor(options) {
  console.log(options,'options')
  super(options);
  this.diameter = options.diameter || 250;
  this.kerning = options.kerning || 0;
  this.text = options.text || '';
  this.flipped = options.flipped || false;
  this.fill = options.fill || '#000';
  this.fontFamily = options.fontFamily || 'Times New Roman';
  this.fontSize = options.fontSize || 24;
  this.fontWeight = options.fontWeight || 'normal';
  this.fontStyle = options.fontStyle || '';
  this.strokeStyle = options.strokeStyle || null;
  this.strokeWidth = options.strokeWidth || 0;
  this.lockUniScaling = true;
  this._updateCanvasDimensions();
}

setText(text) {
  this.set('text', text);
  this._updateCanvasDimensions();
  return this;
}

_updateCanvasDimensions() {
  const canvas = this.getCircularText();
  this._trimCanvas(canvas);
  this.set({ width: canvas.width, height: canvas.height });
}

_getFontDeclaration() {
  return [
    this.fontStyle,
    this.fontWeight,
    `${this.fontSize}px`,
    this.fontFamily
  ].join(' ');
}

_trimCanvas(canvas) {
 try {
      var ctx = canvas.getContext("2d", { willReadFrequently: true }),
        w = canvas.width,
        h = canvas.height,
        pix = {
          x: [],
          y: [],
        },
        n,
        imageData = ctx.getImageData(0, 0, w, h),
        fn = function (a, b) {
          return a - b;
        };

      for (var y = 0; y < h; y++) {
        for (var x = 0; x < w; x++) {
          if (imageData.data[(y * w + x) * 4 + 3] > 0) {
            pix.x.push(x);
            pix.y.push(y);
          }
        }
      }
      pix.x.sort(fn);
      pix.y.sort(fn);
      n = pix.x.length - 1;

      w = pix.x[n] - pix.x[0];
      h = pix.y[n] - pix.y[0];
      var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);

      canvas.width = w;
      canvas.height = h;
      ctx.putImageData(cut, 0, 0);
    } catch (error) {
      console.log(error);
    }
}

getCircularText() {
  var text = this.text,
      diameter = this.diameter,
      flipped = this.flipped,
      kerning = this.kerning,
      fill = this.fill,
      inwardFacing = true,
      startAngle = 0,
      canvas = fabric.util.createCanvasElement(),
      ctx = canvas.getContext("2d", { willReadFrequently: true }),
      cw, // character-width
      x, // iterator
      clockwise = -1; // draw clockwise for aligned right. Else Anticlockwise
    if (flipped) {
      startAngle = 180;
      inwardFacing = false;
    }

    startAngle *= Math.PI / 180; // convert to radians

    // Calc heigt of text in selected font:
    var d = document.createElement("div");
    d.style.position = "relative";
    d.style.zIndex = 1111111111111;
    d.style.fontFamily = this.fontFamily;
    d.style.whiteSpace = "nowrap";
    d.style.fontSize = this.fontSize + "px";
    d.style.fontWeight = this.fontWeight;
    d.style.fontStyle = this.fontStyle;
    d.textContent = text;
    document.body.appendChild(d);
    var textHeight = d.offsetHeight;
    document.body.removeChild(d);

    canvas.width = canvas.height = diameter;

    ctx.font = this._getFontDeclaration();

    // Reverse letters for center inward.
    if (inwardFacing) {
      text = text.split("").reverse().join("");
    }

    // Setup letters and positioning
    ctx.translate(diameter / 2, diameter / 2); // Move to center
    startAngle += Math.PI * !inwardFacing; // Rotate 180 if outward
    ctx.textBaseline = "middle"; // Ensure we draw in exact center
    ctx.textAlign = "center"; // Ensure we draw in exact center

    // rotate 50% of total angle for center alignment
    for (x = 0; x < text.length; x++) {
      cw = ctx.measureText(text[x]).width;
      startAngle +=
        ((cw + (x == text.length - 1 ? 0 : kerning)) /
          (diameter / 2 - textHeight) /
          2) *
        -clockwise;
    }

    // Phew... now rotate into final start position
    ctx.rotate(startAngle);

    // Now for the fun bit: draw, rotate, and repeat
    for (x = 0; x < text.length; x++) {
      cw = ctx.measureText(text[x]).width; // half letter
      // rotate half letter
      ctx.rotate((cw / 2 / (diameter / 2 - textHeight)) * clockwise);
      // draw the character at "top" or "bottom"
      // depending on inward or outward facing

      // Stroke
      if (this.strokeStyle && this.strokeWidth) {
        ctx.strokeStyle = this.strokeStyle;
        ctx.lineWidth = this.strokeWidth;
        ctx.miterLimit = 2;
        ctx.strokeText(
          text[x],
          0,
          (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2)
        );
      }

      // Actual text
      ctx.fillStyle = fill;
      ctx.fillText(
        text[x],
        0,
        (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2)
      );

      ctx.rotate(
        ((cw / 2 + kerning) / (diameter / 2 - textHeight)) * clockwise
      ); // rotate half letter
    }
    return canvas;
}

_render(ctx) {
  const canvas = this.getCircularText();
  this._trimCanvas(canvas);
  this.set({ width: canvas.width, height: canvas.height });
  ctx.drawImage(canvas, -this.width / 2, -this.height / 2, this.width, this.height);
  this.setCoords();
}

toObject(propertiesToInclude) {
  return super.toObject([
    "text",
    "diameter",
    "kerning",
    "flipped",
    "fill",
    "fontFamily",
    "fontSize",
    "fontWeight",
    "fontStyle",
    "strokeStyle",
    "strokeWidth"
  ].concat(propertiesToInclude));
}

static fromObject(object, callback) {
  return fabric.FabricObject._fromObject(
    "CurvedText",
    object,
    callback,
    forceAsync,
    "curved-text");
}

}`

Is there any way to solve this problem? Please help. Thank you.

[asturur]

this is not a part of the fabric module, so what you ask is not possible and also does not make sense.
Why would you do something like that? what is the actual issue you are facing?

[niketaOptimumnbrew]

Thanks @asturur for replying me.
I want to create custom class with fabric,
I want one feature which is not available in fabric so I'm creating one class which extend fabric object feature + additional feature.

Now the problem is that I can't use fabric.customclass cause it's not register in fabric and not known class of fabric.
every time when i load json which type is 'curved-text' then it's not render on canvas and gives me below error
error : fabric: No class registered for curved-text

[asturur]

you have to check the other classes. At the end of every class file like Rect.ts

https://github.com/fabricjs/fabric.js/blob/master/src/shapes/Rect.ts#L226

you will see they use the classRegistry.
In your case it would be:

classRegistry.setClass(MyCustomClass, 'curved-text');

at the end of your class file

[niketaOptimumnbrew]

I've already tried with classRegistry but object not render on canvas and no error show on console related to customclass.

[asturur]

Does not render or throw an errors that says fabric: No class registered for curved-text ?
Not rendering and throwing an error are 2 different things.
Did the error went away after you added that line?

[niketaOptimumnbrew]

yes , that error went away after adding classRegistry.setClass(MyCustomClass, 'curved-text') line but the object not render on canvas.