Hello I use fabricjs to play with the html canvas. I create the canvas and i add group of objects on it.

On a group of objects, I need to keep fixed width & height for some objects while I scale the object.

I use the 'object:scaling' event to get the active object when it changes size, I read each object of the group and I assign element[i].set({'radius':5}) on the group objects that I want to be unchanged.

But the result is that , all the group object to resize.

I show you the snippet of the object:scaling event :

 canvas.on('object:scaling',function(e){

        var activeObject1 = e.target;

        var elements = e.target._objects;

          var count_elements =  elements.length;


            for(var i = 0; i < count_elements; i++) {

                var type = elements[i].typeCircle;

                if(type == "parts"){
                                      //elements[i].set({"radius":8,"fill":"#abcde2","stroke":"#367827"});
                    //elements[i].set('radius',8);
                    /*elements[i].setWidth(16);
                    elements[i].setHeight(16);
                    elements[i].currentWidth = 16;
                    elements[i].currentHeight = 16;
                    elements[i].scaleX = 1;
                    elements[i].scaleY = 1;
                    console.log(elements[i]);
                    canvas.renderAll();*/
                }
              }
         });

What should I write into the for loop to keep fixed size on some objects? everything that I used above, they don't work except for the "fill":"#abcde2","stroke":"#367827"

If anyone has faced something similar on fabricjs, please let me know .

Hello I use fabricjs to play with the html canvas. I create the canvas and i add group of objects on it.

On a group of objects, I need to keep fixed width & height for some objects while I scale the object.

I use the 'object:scaling' event to get the active object when it changes size, I read each object of the group and I assign element[i].set({'radius':5}) on the group objects that I want to be unchanged.

But the result is that , all the group object to resize.

I show you the snippet of the object:scaling event :

 canvas.on('object:scaling',function(e){

        var activeObject1 = e.target;

        var elements = e.target._objects;

          var count_elements =  elements.length;


            for(var i = 0; i < count_elements; i++) {

                var type = elements[i].typeCircle;

                if(type == "parts"){
                                      //elements[i].set({"radius":8,"fill":"#abcde2","stroke":"#367827"});
                    //elements[i].set('radius',8);
                    /*elements[i].setWidth(16);
                    elements[i].setHeight(16);
                    elements[i].currentWidth = 16;
                    elements[i].currentHeight = 16;
                    elements[i].scaleX = 1;
                    elements[i].scaleY = 1;
                    console.log(elements[i]);
                    canvas.renderAll();*/
                }
              }
         });

What should I write into the for loop to keep fixed size on some objects? everything that I used above, they don't work except for the "fill":"#abcde2","stroke":"#367827"

If anyone has faced something similar on fabricjs, please let me know .

• javascript
• frameworks
• html5-canvas
• fabricjs

3 Answers 3

You must use setScaleX() and setScaleY() methods. Here is an example...

var Rect = new fabric.Rect({
  width: 200,
  height: 200,
  top: 100,
  left: 100,
  fill: 'rgba(255,0,0,0.5)',
  stroke: '#000',
  strokeWidth: 1,
});

var Circle = new fabric.Circle({
  left: 100,
  top: 100,
  fill: '#FF00FF',
  stroke: 'red',
  radius: 100,
  opacity: 1,
});

var Group = new fabric.Group([Rect, Circle])
canvas.add(Group)
canvas.on({
  'object:scaling': onChange
})

function onChange(obj) {
    var circle = obj.target.item(1),
        group = obj.target,
        scaleX = circle.width / group.getWidth(),
        scaleY = circle.height / group.getHeight();
    circle.setScaleX(scaleX);
    circle.setScaleY(scaleY);

}

JSFIDDLE

Using fabricjs2 to stop scaling of a text item I have modified Rafik Avtoyan's function to work well. I have locked Y scaling for my group so you will have to add this if required.

function handleScalingEvent(obj) {
    var text = obj.target.item(1),
        group = obj.target,
        scaleX = group.width / (group.width * group.scaleX);
    text.set('scaleX', scaleX);
}

Best way to make the objects the same size is to divide desired width by object width. For example, if you want all added objects to be 256px the code will look this way:

     function selectImage(imagePath){
        fabric.Image.fromURL(imagePath, function(oImg) {
            canvas.add(oImg);
            let zoom = 256 / oImg.width;
            oImg.set({ scaleX: zoom, scaleY: zoom, });
            oImg.center();
        });
    }

In the case when the image will be 64px it will scale it by 4 to 256px and in case the image is 512px it will scale it by 0.5 which will make the image smaller to 256px.