zoukankan      html  css  js  c++  java
  • fabric.js 限制缩放的最大最小比例

    var rect = new fabrics.Rect({
        v: true,
        top: 216,
        left: 384,
         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 的 最大没有只能在缩放中 判断比例,如果超出,就锁住缩放,然后缩放到目标倍数,然后解锁。

  • 相关阅读:
    04_移动端-伪元素选择器
    03_移动端-结构伪类选择器
    02_移动端-属性选择器
    Dva+Antd创建React项目(一)
    Windows 10 使用打印机扫描
    中间件-redis
    #期望dp#51nod 2015 诺德街
    Codeforces Round #685 (Div. 2)
    USACO 4.2
    #保序回归问题,单调栈,二分#洛谷 5294 [HNOI2019]序列
  • 原文地址:https://www.cnblogs.com/maopixin/p/11159299.html
Copyright © 2011-2022 走看看