Fabric JS 调整组大小

Question

我有几个小组的 Canvas。组中有两个文本和行，我想使用输入文本调整选定行的大小。现在我有输入文本，当我在输入文本中选择一个组时，实际上是高度，但现在我将值更改为文本字段并调整组/对象的大小，但我有问题“边框”这个元素允许我调整大小和旋转对象。当我设置SelectedObject.set({height: 300}); 时，只有边框正在调整大小，scaledObject.item(0).set({height: 300}); 只有没有边框的行，当我把它放在一起时，所有东西都被调整了但边框不在对象周围，我如何使用输入文本正确调整对象的大小？

Answer 1

我为一个有图形和文本的组提供了这个解决方案，我这样做是为了保持文本大小和边框宽度。

var canvas = new fabric.Canvas("c1");


reinit()
canvas.on({
    'object:scaling': function(e) {
    	
        var obj = e.target,
            w = obj.width * obj.scaleX,
            h = obj.height * obj.scaleY,
            s = obj.strokeWidth;
            
        console.log(obj.width, obj.scaleX, h,w,s)
		
        obj._objects[0].set({
            'height'     : obj.height,
            'width'      : obj.width,
            'scaleX'     : 1,
            'scaleY'     : 1,
            h: h,
            w: w
            //top: 1,
            //left: 1,
        });
        
        /*e.target.set({
            'height'     : h,
            'width'      : w,
            'scaleX'     : 1,
            'scaleY'     : 1
        });*/
    }
});

canvas.on({
    'object:modified': function(e) {
    console.log(e)
    //e.target.set({scaleX:1, scaleY:1})
    	group = e.target
    	rect = e.target._objects[0]
      rect.set({height:rect.h, width: rect.w})
      console.log('r',rect.width, group.width)
      text = group._objects[1]
      canvas.remove(group)
      canvas.add(new fabric.Group([rect,text], {
      	top: group.top,
        left: group.left
      }))
    }

});

function reinit(){
	var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    
    stroke: "rgb(0,0,0)",
    strokeWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
	});

  var text = new fabric.IText('test', {  fontSize: 16});

  var group = new fabric.Group([ el, text ], {
     width: 200,
     height: 200,
     left: 5,
     top: 5,
  });
  canvas.add(group);
	canvas.renderAll();

}

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c1" width="600" height="500" style="border:1px solid #ccc"></canvas>

这里是小提琴http://jsfiddle.net/davidtorroija/qs0ywh8k/1/

如果这对您没有用，那么您在此答案中还有其他方法：

how to display size on shape after scaled using fabric js?

Rect with stroke, the stroke line is mis-transformed when scaled

编辑： 这里有另一个完美的例子！ 也使用椭圆和三角形等 http://jsfiddle.net/GrandThriftAuto/6CDFr/15/