使用 Angular 将自定义属性添加到 fabric.js 对象

Question

如问题中所述，我正在尝试将自定义属性添加到 Fabric.js 对象。

我试过了

rect.customAttribute = value

但这会卡住编译，我收到以下错误：

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

我也试过 toObject() 功能，但无法找回我的属性并进行设置。同样在使用 toObject() 然后尝试使用以前的方法设置我添加的属性后，我在逻辑上得到了同样的错误。

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'])

Answer 1

到目前为止我发现的唯一解决方案是更改 IObjectOptions 定义并添加 my属性以在 node_modules/@types/fabric/fabric-impl.d.ts 中添加其中的任何自定义变量，这里是一个样本

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;
  ...

Answer 2

您可以简单地创建一个继承自原始接口的接口。例如，如果我想将一个 id 添加到一个矩形中：

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

然后用它作为你的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);

使用 Angular 将自定义属性添加到 fabric.js 对象

adding custom attribute to fabric.js Object using Angular

fabricjs

typescript

angular