fabric.js 限制缩放的最大最小比例

最新推荐文章于 2024-07-30 17:53:07 发布

转载最新推荐文章于 2024-07-30 17:53:07 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_30847271/article/details/96468126

标签

#fabric

收录于

fabric.js 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Fabric.js中设置矩形对象的缩放限制，包括设定最小和最大缩放比例，并在对象移动和缩放过程中进行边界检查，确保其始终在指定范围内。同时，文中展示了在缩放事件中如何实时调整对象的大小并更新位置。

fabric.js 限制缩放的最大最小比例
var rect = new fabrics.Rect({
    v: true,
    top: 216,
    left: 384,
    width: 160,
    height: 90,
    fill: 'transparent',
    borderColor: '#05ca7e', //描边颜色
    borderDashArray: [0], //水印框虚线边
    hasRotatingPoint: false, //旋转点
    cornerColor: '#05ca7e', //边角颜色
    transparentCorners: false, //边角是否透明
    cornerStyle: 'rect', //边角形状
    cornerSize: 8, //边角大小
    cornerStrokeColor: '#05ca7e', //边角描边颜色
    cornerFillColor: '#05ca7e', //边角描边颜色
    lockScalingFlip: true, //控制缩放翻转
    lockUniScaling: true, //控制四个正方向缩放
    minScaleLimit: 0.5 // 最小限制
})
// 移动中限制区域
rect.on('moving', e => {
    this.posHandle(e.target);
});
// 移动结束修改位置
rect.on('moved', e => {
    this.videoHandle();
});
// 缩放中限制区域
rect.on('scaling', e => {
    // 最大限制
    if (e.target.scaleX > 2.5) {
        e.target.lockScalingX = true;
        e.target.scale(2.5);
        e.target.lockScalingX = false;
    };
    this.posHandle(e.target);
});
// 缩放结束修改位置
rect.on('scaled', e => {
    this.videoHandle();
});
this.canvas.add(rect);