如何使用 fabricJS 对象实现多重继承？

Question

我想创建一个新的fabric.MyObject，它只是一个fabric.Object，但有一些特殊的道具和方法。所以我正在创建一个fabric.MyObject，它只在fabric.Object 上调用initialize，一切都很好。

现在我想要拥有像 MyRect、MyCircle 等应该继承自 MyObject 的特殊形状，因为它们应该共享由它提供的特色服务。

我正在努力制作例如MyRect，它继承自fabric.Rect，并且还使用MyObject 的道具，因为fabric.Rect 只是继承自fabric.Object（我不想改变因为我可能也需要“正常”的矩形）。

一些提示将不胜感激:)

var canvas = new fabric.Canvas("c");

//create new object that has some defaults changed
fabric.MyObject = fabric.util.createClass(fabric.Object, {
    type: "myObject",
    
    initialize: function (options) {
  	this.callSuper("initialize", fabric.util.object.extend({
    	    hasControls: true,
            cornerColor: "black",
            transparentCorners: false,
            hasBorders: false,
            fill: "rgba(255,0,0,.5)",
            stroke: "black",
            perPixelTargetFind: true
        }, options));
  }
});

//create new rect that builds up on the custom MyObject
fabric.MyRect = fabric.util.createClass(fabric.Rect, {
    type: "myRect",
	
    initialize: function (options) {
  	//how can I make it work that fabric.Rect is not using fabric.Object but fabric.MyObject instead?
        this.callSuper("initialize", options);
    }
});

//creates just a "normal" rect
canvas.add(new fabric.MyRect({
  left: 100,
  top: 100,
  width: 100,
  height: 100
}));

canvas {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="400" height="300"></canvas>

Answer 1

我认为没有直接的方法可以做到这一点。 Rect 调用 fabric.util.createClass 和 fabric.Object。

您可以只覆盖fabric.Object 中的值，或者创建一个具有一堆默认值的对象并将其传递给您的所有fabric.MyRect 和fabric.MyCircle 类。

如果你能按照你的提议去做会很有趣，也许是feature you could propose to fabricjs directly。