简体   繁体   中英

How can I achieve multiple inheritance with fabricJS objects?

I want to create a new fabric.MyObject that simply is a fabric.Object but with some special props and methods. So I'm creating a fabric.MyObject that just calls initialize on fabric.Object and everything is fine.

Now I want to have special shapes like MyRect , MyCircle and so on that should inherit from MyObject as they should share the specials served by it.

I'm struggeling on how to make for example MyRect that inherits from fabric.Rect and also uses the props of MyObject as fabric.Rect just inherits from fabric.Object (and I don't want to change that as I may need "normal" rects as well).

Some hints would be appreciated :)

 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> 

I don't think there is a straightforward way to do this. Rect calls fabric.util.createClass with fabric.Object .

Either you could just overwrite values in fabric.Object or you create an object with a bunch of defaults and pass that into all your fabric.MyRect and fabric.MyCircle classes.

It would be interesting if you could do what you were proposing and perhaps it's a feature you could propose to fabricjs directly .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM