Fabricjs：克隆子类 object 使克隆不可见

Question

I want to make a copy of a fabric object that is a sub-class of a regular fabric class (ie a new object with the same properties as the original). Cloning seemed to be the way to go, and indeed cloning a regular object, such as a Rect, works fine. But if I use the same code to clone an instance of a sub-class, the resulting object is not visible on the canvas (although it is listed in the results of canvas.getObjects() ).

What am I doing wrong?

Here is a minimal example. This is also at https://codepen.io/micrology/pen/dyKPbRO Running this displays 3 rectangles, two red but only one yellow. There should be 2 yellow rectangles.

        var canvas = new fabric.Canvas('canvas')

        var rect = new fabric.Rect({
            top: 100,
            left: 100,
            width: 60,
            height: 70,
            fill: 'red',
        })
        canvas.add(rect)
        var clonedRect
        rect.clone((obj) => {
            clonedRect = obj
            clonedRect.set({left: obj.left + 10, top: obj.top + 10})
        })
        canvas.add(clonedRect)

        var CustomRect = fabric.util.createClass(fabric.Rect, {
            type: 'rect',
            initialize: function (options) {
                this.callSuper('initialize', options)
            },
        })
        var customRect = new CustomRect({
            top: 200,
            left: 200,
            width: 50,
            height: 50,
            fill: '#ffff00',
        })
        canvas.add(customRect)

        var clonedCustomRect
        customRect.clone((obj) => {
            clonedCustomRect = obj
            clonedCustomRect.set({left: obj.left + 10, top: obj.top + 10})
        })
        canvas.add(clonedCustomRect)

Answer 1

For people still having this problem, there is currently an open discussion.