设置面料对象的最小和最大调整大小限制
问题描述:
我正在使用面料js调整大小对象我希望用户调整最小限制的对象大小&。如何使用面料js来做到这一点。设置面料对象的最小和最大调整大小限制
我试过的属性,如
lockScalingX,lockScalingY,lockMomentX,lockMomentY但没有运气。
任何帮助将不胜感激。
感谢,
答
有没有办法在布料做它本身,但是你可以连接到缩放事件,并作出修改,你应该喜欢的对象。在这段代码中,我停止缩放以及在骑行缩放时从顶部/左侧移动正确的织物。
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>
答
可能会派上用场的人寻找类似的答案。
您可以通过设置minScaleLimit
本地设置缩放的最小限制。但是,没有可用于设置最大限制的开箱即用解决方案。