fabricjsfabricjs2

Change control fill color while scaling object in Fabricjs


For a few days now, I have been trying to change the fill color of the control that is scaling an object.

Here is a gif of what I'm talking about:

Fabricjs control fill color

I would like some guidance on how to achieve this. I have been digging through Fabricjs documentation for days trying to get an idea on how to approach this problem.

https://github.com/fabricjs/fabric.js/wiki/Working-with-events

My theory was to bind to mouse:down and mouse:up events. When mouse:down event fires, obtain the control context and change its fill color and when the mouse:up fires, restore the fill color.

Unfortunately, I can't find any fabricjs method that would allow me to obtain the control context.

http://fabricjs.com/docs/fabric.Canvas.html

http://fabricjs.com/docs/fabric.Object.html


    canvas.on('mouse:down',(){
     // Obtain control context and change fill

    });
    canvas.on('mouse:up',(){
    // Obtain control context and restore fill

    });

I'm using Fabricjs version 3.2.0


Solution

  • I overwrote the _drawControl from fabric.Object. As you can see I verified this.__corner control variable, If are equal I changed the fill and stroke color to red. Very important I restored the context after I drawn the control

    var canvas = new fabric.Canvas('fabriccanvas');
    canvas.add(new fabric.Rect({
            top: 50,
            left: 50 ,
            width: 100,
            height: 100,
            fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
            //fix attributes applied for all rects
           cornerStyle:"circle",
            originX: 'left',
            originY: 'top',
            transparentCorners:false
            
        }));
    fabric.Object.prototype._drawControl =    function(control, ctx, methodName, left, top, styleOverride) {
          styleOverride = styleOverride || {};
          if (!this.isControlVisible(control)) {
            return;
          }
          var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
          switch (styleOverride.cornerStyle || this.cornerStyle) {
            case 'circle':
            if(control == this.__corner){
              ctx.save();
            	ctx.strokeStyle = ctx.fillStyle='red';
            }
              ctx.beginPath();
              ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
              ctx[methodName]();
              if (stroke) {
                ctx.stroke();
              }
              if(control == this.__corner){
              ctx.restore();
            	
            }
              break;
            default:
              this.transparentCorners || ctx.clearRect(left, top, size, size);
              ctx[methodName + 'Rect'](left, top, size, size);
              if (stroke) {
                ctx.strokeRect(left, top, size, size);
              }
          }
        } 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.2.0/fabric.js"></script>
    
    <br/>
    <canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>