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 ...
随机推荐
- javascript null vs undefined
这个是很古老的问题了. 一直存在争议,有些人认为,很多语言没用 undefined 也活的好好,为啥要 undefined 呢. 那有了 undefined 是否还需要 null 呢 ? typesc ...
- 深入理解Magento - 第一章 - Magento强大的配置系统
深入理解Magento 作者:Alan Storm翻译:zhlmmc 前言第一章 - Magento强大的配置系统第二章 - Magento请求分发与控制器第三章 - 布局,块和模板第四章 - 模型和 ...
- Delphi COM对象
作者:巴哈姆特 http://www.cnpack.org(转载请注明出处并保持完整) 如果没有接触过COM对象的话,你会觉得接口真的很麻烦,也许会有:“还不如直接定义一个类更方便”的想法. 的确, ...
- Dubbo 如何成为连接异构微服务体系的最佳服务开发框架
从编程开发的角度来说,Apache Dubbo (以下简称 Dubbo)首先是一款 RPC 服务框架,它最大的优势在于提供了面向接口代理的服务编程模型,对开发者屏蔽了底层的远程通信细节.同时 Dubb ...
- “今日头条杯”首届湖北省大学程序设计竞赛--F. Flower Road
题目链接:点这 github链接:(包含数据和代码,题解):点这 链接:https://www.nowcoder.com/acm/contest/104/E来源:牛客网 题目描述 (受限于评测机,此题 ...
- nodejs moment 修改时间格式 日期格式与时间戳格式互相转化
node js moment 修改时间格式 日期格式与int格式互相转化 nvm use 8.3 > moment = require('moment') > days = '2019-0 ...
- 使用python发送163邮件 qq邮箱
使用python发送163邮件 def send_email(title, content): import smtplib from email.mime.multipart import MIME ...
- Java-Class-@I:java.annotation.Resource
ylbtech-Java-Class-@I:java.annotation.Resource 1.返回顶部 2.返回顶部 1.1. import javax.annotation.Resource ...
- 数据整理B
- 找到最大或者最小的N个元素
heapq模块中的两个函数nlargest()和nsmallest() import heapq nums = [1,5,6,458,6,787,5,45,6] print(heapq.nlarges ...