首页 > Web开发 > 详细

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

时间:2019-07-09 18:49:12      阅读:158      评论:0      收藏:0      [点我收藏+]
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);

 看红色位置处。最小比例fabric 是有api 的 最大没有只能在缩放中 判断比例,如果超出,就锁住缩放,然后缩放到目标倍数,然后解锁。

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

原文:https://www.cnblogs.com/maopixin/p/11159299.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!