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);
详细解决方案
fabric.js 限制缩放的最大最小比例
热度:42 发布时间:2023-12-27 15:21:58.0
相关解决方案
- hyperledger fabric 再启动一个节点
- hyperledger fabric 部署channel和智能合约的一些命令
- hyperledger fabric nodejs SDK开发(四)------SDK修改账本机制
- hyperledger fabric nodejs SDK开发(三)------SDK查询机制
- hyperledger fabric 测试(八) 1.18 服务器多机部署
- hyperledger fabric 测试(七)1.17链码包生成
- hyperledger fabric 测试(六)1.15链码API
- hyperledger fabric 测试(五)1.15私有数据
- hyperledger fabric 测试(四)1.14 fabric网络迭代
- hyperledger fabric 测试(三) 1.13 加入新的组织
- hyperledger fabric 测试(二)1.12 手动配置fabric网络
- fabric.js 限制缩放的最大最小比例
- fabric 画板,绘制几何图形复杂图形