如何限制在fabricjs中将圆/矩形调整为某个半径/宽度/高度？

Question

我使用Fabricjs并试图限制一个矩形，使其达到中圈和最小宽度/高度的情况下，最小半径在矩形的情况后，不能调整大小：

这是我迄今所做：JSFIDDLE。

代码： `

var canvas = new fabric.Canvas("canvas2"); 
var circle, isDown, origX, origY; 
circle = new fabric.Circle({ 
    left: 20, 
    top: 30, 
    originX: 'left', 
    originY: 'top', 
    radius: 30, 
    angle: 0, 
    fill: '', 
    stroke:'red', 
    strokeWidth:3, 
}); 
canvas.add(circle); 
function checkscale(e) { 
     var obj = e.target; 
     obj.setCoords(); 
     var b = obj.getBoundingRect(); 
     if(obj.toJSON().objects[0].radius == undefined) { 
      //rectangle case 
      if(obj.width < 27) { 
       obj.width = 27; 
      } 
      if(obj.height < 27) { 
       obj.height = 27; 
      } 
      return; 
     } else { 
      //circle case 
      if(obj.width < 48) { 
       obj.width = 48; 
      } 
      if(obj.height < 48) { 
       obj.height = 48; 
      } 
      return; 
     } 
     if (!(b.left >= minX && maxX >= b.left + b.width && maxY >= b.top + b.height && b.top >= minY)) { 
      obj.left = obj.lastLeft; 
      obj.top = obj.lastTop; 
      obj.scaleX= obj.lastScaleX 
      obj.scaleY= obj.lastScaleY 
     } else { 
      obj.lastLeft = obj.left; 
      obj.lastTop = obj.top; 
      obj.lastScaleX = obj.scaleX 
      obj.lastScaleY = obj.scaleY  
     } 
    } 
    canvas.observe("object:scaling", checkscale); 

` 任何人能做到这一点？

Answer 1

你不需要弄乱半径，toJson和宽度和高度。 您正在缩放一个fabricJs对象，因此您只需要scaleX和scaleY即可。

考虑升级到1.6 fabricJs

var canvas = new fabric.Canvas("canvas2"); 
 
var circle, isDown, origX, origY; 
 
circle = new fabric.Circle({ 
 
     left: 20, 
 
     top: 30, 
 
     originX: 'left', 
 
     originY: 'top', 
 
     radius: 30, 
 
     angle: 0, 
 
     fill: '', 
 
     stroke:'red', 
 
     strokeWidth:3, 
 
     lockScalingFlip: true 
 
    }); 
 
    canvas.add(circle); 
 

 
function checkscale(e) { 
 
    var obj = e.target; 
 
    //var dim = obj._getTransformedDimensions(); 
 
    if (obj.getWidth() < 50) { 
 
    obj.scaleX = obj.lastScaleX; 
 
    } else { 
 
    obj.lastScaleX = obj.scaleX; 
 
    } 
 
    if (obj.getHeight() < 50) { 
 
    obj.scaleY = obj.lastScaleY; 
 
    } else { 
 
    obj.lastScaleY = obj.scaleY; 
 
    } 
 
} 
 
canvas.observe("object:scaling", checkscale);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" ></script> 
 
<canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"></canvas>