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.