Is there a way to add images to corner controls with Fabric JS?

[ibrahimrehman1]

Hi Guys!

I want to add images to the corners like in the below image when using fabric.IText() or when adding any object to canvas. I haven't been able to find a solution to this. Kindly help me with this. Thanks!

I am using the following CDN:

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"
      crossorigin="anonymous"
    ></script>

This is my code so far:

new fabric.IText("Default Text", {
        
        fontFamily: "sans-serif",
        fontSize: 90,
        backgroundColor: "red",
        rotatingPointOffset: 120,
        cornerColor: "blue",
        cornerSize: 50,
        left: 250,
        top: 250,
        angle: 0,
        padding: 40,
        width: width,
        height: height,
        fill: "white",
        originX: "center",
        originY: "center",
      });

[ShaMan123]

Yes
For sure
Look at the control logic.
There is a render method.
http://fabricjs.com/custom-control-render

[asturur]

The scaling equally is wrapped with the anchor position wrapper.
How does your control looks like? can you paste the whole action?

[shashank-brightness]

Yes i have assigned actionHandler to direct fabric.controlsUtils.scalingEqually as i am still using 5th version via cdn so not used import for controlsUtils.

[asturur]

it should be good enough, providing that your transform is actually doing what is supposed to do.
Does your control have an actionName too? which is it? can you console.log during the 'scaling' event what the options passed to your event handler look like?

[shashank-brightness]

I don't have actionName for my control and this is how options look when i attach scaling handler for the object where i set that newly made control visible and used.

and this is the whole code for control. I have no idea why it reverses the scale operation.

addCropRectangleControls(cropSelectionRect) {
        let self = this;
        return new Promise((resolve,reject) => {
            fabric.Image.fromURL(getObjectControlImages().cropTopLeftImage,function(img, isError) {
                if(isError) {
                    reject(isError);
                }
                img.scaleToWidth(20);
                const cropTopLeftIconDataUrl = img.toDataURL();
                const cropTopLeftIcon = document.createElement('img');
                
                cropTopLeftIcon.src = cropTopLeftIconDataUrl;
    
                const cropTopLeftControl = new fabric.Control({
                    x: -0.5,
                    y: -0.5,
                    cornerSize: 20,
                    offsetY: 8,
                    offsetX: 8,
                    actionHandler: fabric.controlsUtils.scalingEqually, 
                    cursorStyleHandler: fabric.Object.prototype.controls.tl.cursorStyleHandler,
                    render: self.renderIcon(cropTopLeftIcon),
                    
                });
                cropSelectionRect.setControlsVisibility({
                    cropTopLeft: true,
                    tl: false
                })
                fabric.Object.prototype.controls.cropTopLeftControl = cropTopLeftControl;
                resolve();
            }, {crossOrigin: 'anonymous'});
        })
    },

[shashank-brightness]

@asturur Can you please suggest on above? How do I need to wrap scalingEqually method to scale in same way as older controls on each newly added controls?