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 限制缩放的最大最小比例的更多相关文章

  1. fabric.js和高级画板

    本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...

  2. Canvas实用库Fabric.js使用手册

    简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...

  3. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  4. Fabric.js canvas 图形库

    1.github地址: https://github.com/fabricjs/fabric.js 2.简述 Fabric.js将canvas的编程变得简单.同时在canvas上添加了交互.交互包括: ...

  5. fabric.js 知识点整理

    fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点: //1: 获得画布上的所有对象: var items = canvas.getObjects(); / ...

  6. (转)第01节:初识简单而且强大的Fabric.js库

    Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...

  7. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  8. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  9. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

随机推荐

  1. clickhouse核心引擎MergeTree子引擎

    在clickhouse使用过程中,针对数据量和查询场景,MergeTree是最常用也是较为合适的表引擎.针对特定的业务,MergeTree的子引擎可以针对不同的业务而定,但都基于MergeTree引擎 ...

  2. delphi TTcpClient TTcpServer分析(转)

    delphi TTcpClient TTcpServer分析(转) 只描述windows socket部分. sockets.pas中各个类得继承关系: TBaseSocket | --------- ...

  3. Yii2 Composer

    首先你必须得在本机配置token账号,里边涉及到一些git的用法,git的托管等等,具体方法如下: http://www.cnblogs.com/fnng/archive/2011/08/25/215 ...

  4. Oracle删除修改字段

    Oracle 增加修改删除字段 添加字段的语法:alter table tablename add (column datatype [default value][null/not null],…. ...

  5. <iframe>框架标签的使用

    同源下 1.iframe属性设置参考:https://blog.csdn.net/xiyiyindie/article/details/53415158 2.父子页面之间元素相互操作:https:// ...

  6. mysql笔试题大餐---2、exists加一些查询

    mysql笔试题大餐---2.exists加一些查询 一.总结 一句话总结: 实践:我之前的mysql真的学的太浅了,这种情况下,依据实践(做题)才是唯一能把它学好的方式 1.MySQL中EXISTS ...

  7. word中怎样把文档里的中文以及中文字符全选?

    word中怎样把文档里的中文以及中文字符全选? 参考: 百度 案例: 有个文档是中英文混杂的 现在需要把中文以及中文字符全部设置成别的颜色 应该怎样操作? 有80多页 别说让我一个一个的设置 以wor ...

  8. Linux之mysql-redis-python使用

    1. rpm包使用 1. 光盘挂载 mount /dev/cdrom /mnt cd /mnt ls 2. 安装rpm包 rpm -ivh vsftpd-3.0.2-22.el7.x86_64.rpm ...

  9. python类的实例方法、静态方法和类方法区别及其应用场景

    https://blog.csdn.net/helloxiaozhe/article/details/79940321 普通实例方法,第一个参数需要是self,它表示一个具体的实例本身. 如果用了st ...

  10. <爬虫>相关的知识

    1.概念.工具和HTTP 什么是爬虫 模拟客户端发送网络请求,获取响应,按照规则提取数据 爬虫的数据去哪了 展示到网页上(百度新闻,今日头条) 进行分析,从数据中寻找规律(指数网站:百度指数) 需要的 ...