码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-07-09 19:29:42      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:mit   corners   abr   nis   col   pos   nsca   can   his   

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 限制缩放的最大最小比例

标签:mit   corners   abr   nis   col   pos   nsca   can   his   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!