Question

我有一个我正在进行的项目，并且我正在尝试使用Fabric.JS来允许我旋转＆amp;缩放项目，但仅限于边界框的最大比例。我在对象上尝试了很多组合：缩放事件，无济于事。我已经将一部分缩放事件注释掉了，但是虽然我所有尝试（确定movingBox宽度等），但我无法将方块的比例限制在框中。

注意，在变换框之前，保持在外边界内......完全是我想要的功能。我只需要在旋转和放大期间使用相同的功能。调整方法...我认为我们需要利用旋转和放大方法。规模方法。任何帮助修改/添加以使这些事情成为可能的帮助都会非常有帮助。

谢谢，

＆＃13;

$(function () {

            var canvas = new fabric.Canvas("c");
            canvas.setHeight(600);
            canvas.setWidth(400);

            var boundingBox = new fabric.Rect({
                fill: "rgba(255, 255, 255, 0.0)",
                width: 98,
                height: 200,
                hasBorders: false,
                hasControls: false,
                lockMovementX: true,
                lockMovementY: true,
                evented: false,
                stroke: "black"
            });

            var movingBox = new fabric.Rect({
                width: 50,
                height: 50,
                hasBorders: false,
                hasControls: true,
                lockRotation: false
            });

            canvas.on("object:moving", function () {
                var top = movingBox.top;
                var bottom = top + movingBox.height;
                var left = movingBox.left;
                var right = left + movingBox.width;

                var topBound = boundingBox.top;
                var bottomBound = topBound + boundingBox.height;
                var leftBound = boundingBox.left;
                var rightBound = leftBound + boundingBox.width;

                movingBox.setLeft(Math.min(Math.max(left, leftBound), rightBound - movingBox.width));
                movingBox.setTop(Math.min(Math.max(top, topBound), bottomBound - movingBox.height));
            });

           //canvas.on("object:scaling", function () {
           //    var top = movingBox.top;
           //    var bottom = top + movingBox.height;
           //    var left = movingBox.left;
           //    var right =  movingBox.width;
           //
           //    var topBound = boundingBox.top;
           //    var bottomBound = topBound + boundingBox.height;
           //    var leftBound = boundingBox.left;
           //    var rightBound = leftBound + boundingBox.width;
           //      
           //   // movingBox.setWidth // need alg here
           //    //movingBox.setHeight // need alg here
           //});


            canvas.add(boundingBox);
            canvas.add(movingBox);




        });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: absolute; top: 149px; left: 151px;">
            <canvas id="c"></canvas>
        </div>

＆＃13;

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

http://jsfiddle.net/davidtorroija/qs0ywh8k/

在fabricjs边界框内旋转和缩放

1 个答案: