fabricjs如何在组元素上保持固定大小而其他元素缩放？ [英] fabricjs How can i keep fixed size on group elements while others scaling?

问题描述

Hello 我使用fabricjs来播放html画布。
我创建画布，然后在其上添加一组对象。

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] .set（{'radius'：5}）。

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.

但结果是，所有要调整大小的组对象。

我向您展示的片段对象：缩放事件：

 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();*/
                }
              }
         });

我应该在for循环中写什么来保持某些对象的固定大小？
我上面使用的所有内容，除了fill外，它们都不起作用：＃abcde2，stroke：＃367827

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"

如果有人在fabricjs上遇到类似的事情，请告诉我。

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

推荐答案

你必须使用setScaleX （）和setScaleY（）方法。
这是一个例子......

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

这篇关于fabricjs如何在组元素上保持固定大小而其他元素缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！