fabricjs - 为结构对象设置最小和最大调整大小限制

Question

我正在使用 fabric js 来调整对象大小，我希望用户在最小和最大限制内调整对象大小。如何使用fabric js做到这一点。

我尝试过类似的属性

lockScalingX,lockScalingY,lockMomentX,lockMomentY 但没有运气。

任何帮助将不胜感激。

谢谢，

Answer 1

没有办法在 Fabric 中进行 native 操作，但您可以连接到缩放事件并对您想要的对象进行任何修改。在这段代码中，当我超过缩放比例时，我停止缩放以及正确的织物从顶部/左侧移动。

window.canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  stroke: "#000",
  strokeWidth: 1,
  centeredRotation: true
});

canvas.add(rect);

var maxScaleX = 2;
var maxScaleY = 2;

rect.on('scaling', function() {
  if(this.scaleX > maxScaleX) {
    this.scaleX = maxScaleX;
    this.left = this.lastGoodLeft;
    this.top = this.lastGoodTop;
  }
  if(this.scaleY > maxScaleY) {
    this.scaleY = maxScaleY;
    this.left = this.lastGoodLeft;
    this.top = this.lastGoodTop;
  }
  this.lastGoodTop = this.top;
  this.lastGoodLeft = this.left;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>