javascript - 如何使用 FabricJS 对象实现多重继承？

Question

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

现在我想要一些特殊的形状，如 MyRect、MyCircle 等，它们应该继承自 MyObject，因为它们应该共享所提供的特色菜靠它。

我正在苦苦思索如何制作例如从 fabric.Rect 继承的 MyRect ，并且还使用 MyObject 的 props 作为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

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

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

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