CODEWITHSUNDEEP
angulartypescriptfabricjs
JSmith
JSmith

Reputation: 4810

adding custom attribute to fabric.js Object using Angular

As told in the question I'm trying to add a custom property to a Fabric.js object.

I've tried

rect.customAttribute = value

but this stucks the compilation I get the following error:

Object literal may only specify known properties, and 'customAttribute' does not exist in type 'IRectOptions'.

I've also tried the function toObject() but couldn't find back my attribute and set it. Also after using toObject() then trying to set my added attribute with the previous method I logically get the same error.

let rect = new fabric.Rect(
    {
        left:0,
        top: 0,
        width: 60
        height:60,
        fill: 'orange',
        selectable: true,
        evented: true,
        name: 'rect',
        cornerColor:'red',
        cornerSize:5,
        borderColor:'red',
        borderScaleFactor: 5,
        noScaleCache:false,
        customAttribute:false
    })
rect.toObject(['customAttribute'])

Upvotes: 2

Views: 1884

Answers (2)

grunk
grunk

Reputation: 14938

You can simply create an interface which inherit from the original one. For instance , if i want to add an id to a rectangle :

interface IRectWithId extends fabric.IRectOptions {
    id: number;
}

And then use it as a parameter of your rect

const opt = {
    left: left,
    top: top,
    strokeWidth: 1,
    width: width,
    height: height,
    fill: 'rgba(98,98,98,0.8)',
    stroke: 'rgba(98,98,98,1)',
    hasControls: true,
    id: this.masks.length
} as IRectWithId;

const rect = new fabric.Rect(opt);

Upvotes: 5

JSmith
JSmith

Reputation: 4810

Only solution I've found so far is changing IObjectOptions definition and adding a myproperty to add any custom variable inside of it in node_modules/@types/fabric/fabric-impl.d.ts here is a sample

interface IObjectOptions {

  /**
  *Custom properties
  *
  */
  my?: any;
  /**
  * Type of an object (rect, circle, path, etc.).
  * Note that this property is meant to be read-only and not meant to be modified.
  * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
  */
  type?: string;
  ...

Upvotes: 0

Related Questions