fabricjs 如何在其他元素縮放時保持組元素的固定大小？

Question

你好，我使用 fabricjs 來玩 html canvas 。 我創建了畫布並在其上添加了一組對象。

在一組對象上，我需要在縮放對象時為某些對象保持固定的寬度和高度。

我使用'object:scaling' 事件來獲取活動對象，當它改變大小時，我讀取組的每個對象，並在組對象上分配element[i].set({'radius':5})想要不變。

但結果是，所有組對象都調整大小。

我向您展示object:scaling 事件的片段：

 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"外，它們不起作用

如果有人在fabricjs 上遇到過類似的事情，請告訴我。

Answer 1

您必須使用 setScaleX() 和 setScaleY() 方法。 這是一個例子...

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

Answer 2

使用fabricjs2 停止縮放文本項我修改了Rafik Avtoyan 的函數以使其正常工作。 我已經為我的組鎖定了 Y 縮放，因此如果需要，您必須添加它。

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

Answer 3

使對象具有相同大小的最佳方法是將所需寬度除以對象寬度。 例如，如果您希望所有添加的對象都是 256px，則代碼將如下所示：

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

在圖像為 64 像素的情況下，它會將其縮放 4 到 256 像素，如果圖像為 512 像素，它將縮放為 0.5，這將使圖像更小到 256 像素。