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 的 最大没有只能在缩放中 判断比例,如果超出,就锁住缩放,然后缩放到目标倍数,然后解锁。
fabric.js 限制缩放的最大最小比例的更多相关文章
- fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...
- Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- Fabric.js canvas 图形库
1.github地址: https://github.com/fabricjs/fabric.js 2.简述 Fabric.js将canvas的编程变得简单.同时在canvas上添加了交互.交互包括: ...
- fabric.js 知识点整理
fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点: //1: 获得画布上的所有对象: var items = canvas.getObjects(); / ...
- (转)第01节:初识简单而且强大的Fabric.js库
Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...
- js实现右下角可关闭最小化div
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- pageresponse.min.js自动缩放页面改写
/* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...
随机推荐
- three.js低版本添加文字(如71版本)
研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...
- ItunesConnect:苹果内购项目元数据缺失
问题描述: 添加内购的App审核时被拒,原因为:ios内购 元数据丢失 问题原因: 审核信息里的 “审核屏幕快照” 和 “备注” 要填写,不然就失败的. 示例图: 1.屏幕快照和审核备注都需要填写 ...
- 如何使用android-support-V7包中ActionBar(Eclipse版)
$*********************************************************************************************$ 博主推荐 ...
- A*寻路算法C++简单实现
搜索区域 如图所示简易地图, 其中绿色方块的是起点 (用 A 表示), 中间蓝色的是障碍物, 红色的方块 (用 B 表示) 是目的地. 为了可以用一个二维数组来表示地图, 我们将地图划分成一个个 ...
- docker核心技术(2)
鸟瞰容器生态系统 一谈到容器,大家都会想到 Docker. Docker 现在几乎是容器的代名词.确实,是 Docker 将容器技术发扬光大.同时,大家也需要知道围绕 Docker 还有一个生态系统. ...
- spring aop的前奏,动态代理 (5)
目录 一.先看一个计算器的抽取和实现 二.使用动态代理解决以上问题. 1 设计原理 2 代码实现 2.1 接口代码 2.2 实现接口的代码 2.3 测试代码 2.3 创建动态代理类 2.4 动态代理类 ...
- 2、获取APP CPU占用率
前面已经介绍过如何获取包名和主活动名.这里不再过多赘述.我们依旧采取两种方案实现APP CPU占有率 Windows下获取APP CPU占用率 adb shell "dumpsys cpui ...
- FreeBSD_11-系统管理——{Part_1-xfce 桌面}
一.首先安装 Xorg 安装 xorg pkg install xorg 清除旧文件(如果已前安装过 xorg) /etc/X11/xorg.conf /usr/local/etc/X11/xorg. ...
- 5-vim-工作模式-02-工作模式切换演练
1.末行模式 命令 英文 功能 : 进入末行模式 w write 保存 q quit 退出,如果没有保存,不允许退出 q! quit 强行退出,不保存退出 wq write&quit 保存 ...
- 42-Ubuntu-用户管理-07-修改权限命令介绍
修改文件权限 序号 命令 作用 01 chown 修改文件/目录拥有者 02 chgrp 修改文件/目录所在主组 03 chmod 修改文件/目录权限 chmod chown chgrp ...