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. jquery实现表格复选框---多行选择问题(php变量)

    1.html多选框标签行 表头的多选框,用于全选,取消全选 <th><input id='allSelected' type="checkbox">< ...

  2. Dart编程实例 算术操作符

    Dart编程实例 算术操作符 void main() { var num1 = 101; var num2 = 2; var res = 0; res = num1+num2; print(" ...

  3. $\mathcal{CSP-S}$,私は来ています

    记事本 开个坑.背包dp我是真的一点也不会了... NOIP2014飞扬的小鸟 NOIP2018货币系统 11-4:$Countdown$ $to$ $the$ $tenth$ $day$ 上午 困的 ...

  4. 误将SELINUXTYPE看成SELINUX后,将其值改为disabled。导致操作系统服务启动,无法进入单用户模式

    环境:Redhat 6.4 ORACLE11g RAC 在安装ORACLE11g之前需要关闭操作系统的防火墙和SELinux. 1.关闭防火墙:iptables -F————————————清除防火墙 ...

  5. 使用PaxScript为Delphi应用增加对脚本的支持

    通过使用PaxScript可以为Delphi应用增加对脚本的支持. PaxScript支持paxC,paxBasic,paxPascle,paxJavaScript(对ECMA-262做了扩展) 四种 ...

  6. [NOIP]模拟17 题解

    A.入阵曲 部分分很肥,正解写得常数稍大就会和暴力一个分,考试的时候写什么自己考虑.(滑稽 部分分的循环边界手抖写错了-25 (原本暴力分中的10分都没了啊啊啊) 没写挂的话应该有75,其实就是二维前 ...

  7. Python 多线程同步队列模型

    Python 多线程同步队列模型 我面临的问题是有个非常慢的处理逻辑(比如分词.句法),有大量的语料,想用多线程来处理. 这一个过程可以抽象成一个叫“同步队列”的模型. 具体来讲,有一个生产者(Dis ...

  8. vs2012+wdk8.0 搭建wdf驱动开发环境

    开发环境搭建: 系统:win7 x64 工具:vs2012 + WDK8.0 插件:wdfcoinstaller.msi (1)先安装vs2012,再安装wdk8.0,这样在打开vs2012时可以创建 ...

  9. 用java打开一个本地文件

    以下有三种方式打开 /** * 借助java.awt.Desktop打开 * @see 打开的目录或文件名中允许包含空格 */ private static void useAWTDesktop() ...

  10. mongodb导入csv

    主要介绍使用自带工具mongoimport工具将 CSV 格式数据导入到 MongoDB 的详细过程. 由于官方提供了mongoimport工具,所以实际上导入 CSV 格式数据的过程非常简单,再次体 ...