设置结构对象的最小和最大调整大小限制 [英] set Min and Max resize limits for fabric object

问题描述

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

I am using fabric js for resizing object i want user to resize the object with in min&max limits. How to do this with fabric js.

我尝试过类似的属性

lockScalingX，lockScalingY，lockMomentX，lockMomentY但没有运气.

lockScalingX,lockScalingY,lockMomentX,lockMomentY but no luck.

任何帮助将不胜感激.

谢谢

推荐答案

无法在结构中本地执行此操作，但是您可以加入缩放事件并对所需对象进行任何修改.在这段代码中，当我过度使用缩放比例时，我将停止缩放比例以及正确的面料从顶部/左侧移动.

There is no way to do it natively in fabric but you can hook in to the scaling event and make any modification to the object you should like. In this code I stop the scaling as well as correct fabric from shifting the top/left when I am over riding the scaling.

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>

这篇关于设置结构对象的最小和最大调整大小限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！