Question

我正在使用fabric js来调整对象的大小我希望用户使用min＆amp; max limits来调整对象的大小。如何使用fabric js。

我尝试过像

这样的属性

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

任何帮助都将不胜感激。

谢谢，

Answer 1

没有办法在结构中本地执行它，但您可以挂钩到缩放事件并对您应该喜欢的对象进行任何修改。在这段代码中，当我超过缩放比例时，我会停止缩放以及正确移动顶部/左侧的布料。

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>

Answer 2

对于寻找类似答案的人来说，可能会派上用场。

您可以通过设置minScaleLimit来原生设置缩放的最小限制。但是，没有可用于设置最大限制的开箱即用解决方案。

Answer 3

我修改了我的阻力限制算法。在我的特定情况下，我有一个带有背景图像的canvas元素，并且我不得不用背景图像限制限制其他对象的大小，因此我添加了额外的边距来做到这一点。但是，如果您只需要限制对象调整画布大小的大小，则可以将多余的边距设置为0。

 //Limit the draggable zone
            this.canvas.on("object:scaling", function (e) {
                let obj = e.target;
                let canvas = obj.canvas;
                let zoom = canvas.getZoom();

                let pan_x = canvas.viewportTransform[4];
                let pan_y = canvas.viewportTransform[5];

                // width & height we are constraining to must be calculated by applying the inverse of the current viewportTransform
                let canvas_height = canvas.height / zoom;
                let canvas_width = canvas.width / zoom;

                let totalWidth = obj.width * obj.scaleX;
                let totalHeight = obj.height * obj.scaleY;

                // if you need margins set them here
                let top_margin = marginYTop;
                let bottom_margin = marginYBottom;
                let left_margin = marginXLeft;
                let right_margin = marginXRight;

                let top_bound = top_margin - pan_y;
                let bottom_bound = canvas_height - bottom_margin - pan_y;
                let left_bound = left_margin - pan_x;
                let right_bound = canvas_width - right_margin - pan_x;

                if (obj.top < top_bound || (obj.top + totalHeight) > bottom_bound) {
                    obj.scaleY = obj.canvas.lastScaleY;
                    obj.set("top", top_bound);
                }
                if (obj.left < left_bound || (obj.left + totalWidth) > right_bound) {
                    obj.scaleX = obj.canvas.lastScaleX;
                    obj.set("left", left_bound);
                }

                obj.canvas.lastScaleY = obj.scaleY;
                obj.canvas.lastScaleX = obj.scaleX;
            });

Answer 4

这是google中排名第一的主题：更好的答案（基于StefanHayden删除了^^和http://jsfiddle.net/fabricjs/58y8b/）：

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
});
//Gradient to see pattern on passing 0 in scaling
// horizontal linear gradient
rect.setGradient('fill', {
   type: 'linear',
   x1: -rect.width / 2,
   y1: 50,
   x2: rect.width / 2,
   y2: 50,
   colorStops: {
       0: '#ffe47b',
       1: 'rgb(111,154,211)'
   }
});

canvas.add(rect);

var maxScaleX = 2;
var maxScaleY = 2;

//Set starting center point:
var centerPoint = rect.getCenterPoint();

//Save center point on center point changing events (moved, maybe some cases of: rotated (not center rotation), added and drop (just assuming for last two))
rect.on('moved rotated added drop', function() {
   centerPoint = rect.getCenterPoint();
});

rect.on('scaling', function() {
  if(this.scaleX > maxScaleX) {
    this.scaleX = maxScaleX;
  }
  if(this.scaleY > maxScaleY) {
    this.scaleY = maxScaleY;
  }
  rect.setPositionByOrigin(centerPoint, 'center', 'center');
})

<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>

设置结构对象的最小和最大调整大小限制

4 个答案: