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 是有api 的 最大没有只能在缩放中 判断比例,如果超出,就锁住缩放,然后缩放到目标倍数,然后解锁。

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

时间: 2025-01-08 02:22:10

fabric.js 限制缩放的最大最小比例的相关文章

fabric.js和高级画板

本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形 文字输入 图片展示及相关移动.缩放等操作 删除功能 (文末附:画板GitHub地址&fabric.js使用秘籍) 功能截图如下: 动态效果图: fabric.js介绍 fabric.js是什么fabric.js是可以简化canvas编写的js库,提供canvas缺少的

fabric.js的简单上手及基于fabric.js的canvas切图工具:1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库. Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具.基于MIT协议开源,在github上有许多人贡献代码. 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍

(转)第04节:Fabric.js用路径画不规则图形

在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径绘图就是用点和线的移动的方式进行绘图.通过对 线.曲线.弧的应用你可以非常复杂的图形. 我们先来看一段的代码: var canvas = new fabric.Canvas('canvas'); var path = new fabric.Path('M 0 0 L 200 100 L 170 20

(转)第05节:Fabric.js的动画设置

凡是出色的Canvas库都少不了制作动画的方法,Fabric.js也不例外,它有着编写简单且功能强大的动画助手,这就是animate( )方法. animate主要使用代码如下: rect.animate('angle',360,{ onChange:canvas.renderAll.bind(canvas) }) 意思是设置了rect的动画是旋转到360度,onChange是动画的回调函数,可以绑定事件,那这里就是当canvas渲染完成时自动发生动画. animate接收三个参数: 第一个参数

js 完成对图片的等比例缩放的方法

1 /* 2 重新按比例设置 页面上对应图片的长和高, 3 */ 4 function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { 5 var width = 0; 6 var height = 0; 7 // 按比例缩小图片的算法 8 if(imgWidth > imgHeight) { 9 if(imgWidth > posWidth) { 10 width = posWidth; 11 height = imgHeig

将图片缩放(质量和比例变化)

- (UIImage *)resizeImage:(UIImage *)image withQuality:(CGInterpolationQuality)quality rate:(CGFloat)rate { UIImage *resized = nil; CGFloat width = image.size.width * rate; CGFloat height = image.size.height * rate; UIGraphicsBeginImageContext(CGSizeM

D3.js 使用缩放zoom时节点无法拖动,只能整体移动的问题

.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackoverflow.com/questions/31692431/d3-js-drag-is-disabled-when-use-zoom

css3 media媒体查询器用法总结(附js兼容方法)

css3 media媒体查询器用法总结 标签: 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示

日常css和js小知识点记录

2015-6-29 1.<meta name="viewport" content="width=device-width,user-scalable=no">设置屏幕宽度为设备宽度,禁止用户手动调整缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, u