fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序.
高级画板功能介绍
- 全局绘制颜色选择
- 护眼模式、网格模式切换
- 自由绘制
- 画箭头
- 画直线
- 画虚线
- 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形
- 文字输入
- 图片展示及相关移动、缩放等操作
- 删除功能
(文末附:画板GitHub地址&fabric.js使用秘籍)
功能截图如下:
动态效果图:
fabric.js介绍
fabric.js是什么 fabric.js是可以简化canvas编写的js库,提供canvas缺少的对象模型,包含动画、数据序列号和反序列化的等高级功能的js库,开源项目,在GitHub有很多人贡献。
fabric.js优缺点 优点:fabric提供超好的画布能力. 缺点:api超级烂,没有相应的demo代码,上手难度较大.
fabric.js使用笔记
对象
fabric.Circle 圆 fabric.Ellipse 椭圆 fabric.Line 直线 fabric.Polygon fabric.Polyline fabric.Rect 矩形 fabric.Triangle 三角形
方法
add(object) 添加 insertAt(object,index) 添加 remove(object) 移除 forEachObject 循环遍历 getObjects() 获取所有对象 item(int) 获取子项 isEmpty() 判断是否空画板 size() 画板元素个数 contains(object) 查询是否包含某个元素 fabric.util.cos fabric.util.sin fabric.util.drawDashedLine 绘制虚线 getWidth() setWidth() getHeight() clear() 清空 renderAll() 重绘 requestRenderAll() 请求重新渲染 rendercanvas() 重绘画板 getCenter().top/left 获取中心坐标 toDatalessJSON() 画板信息序列化成最小的json toJSON() 画板信息序列化成json moveTo(object,index) 移动 dispose() 释放 setCursor() 设置手势图标 getSelectionContext()获取选中的context getSelectionElement()获取选中的元素 getActiveObject() 获取选中的对象 getActiveObjects() 获取选中的多个对象 discardActiveObject()取消当前选中对象 isType() 图片的类型 setColor(color) = canvas.set("full",""); rotate() 设置旋转角度 setCoords() 设置坐标
事件
object:added object:removed object:modified object:rotating object:scaling object:moving object:selected 这个方法v2已经废弃,使用selection:created替代,多选不会触发 before:selection:cleared selection:cleared selection:updated selection:created path:created mouse:down mouse:move mouse:up mouse:over mouse:out mouse:dblclick
常用属性
canvas.isDrawingMode = true; 可以自由绘制 canvas.selectable = false; 控件不能被选择,不会被操作 canvas.selection = true; 画板显示选中 canvas.skipTargetFind = true; 整个画板元素不能被选中 canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色 freeDrawingBrush.width 自由绘笔触宽度
IText的方法
selectAll() 选择全部 getSelectedText() 获取选中的文本 exitEditing() 退出编辑模式
绘制直线
var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green', //笔触颜色
strokeWidth: 2,//笔触宽度
});
canvas.add(line);
绘制虚线
在绘制直线的基础上添加属性strokeDashArray:Array example:
var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green',
strokeDashArray:[3,1]
});
canvas.add(line);
strokeDashArray[a,b] =》 每隔a个像素空b个像素。
图片去掉选中边框和旋转,且只能移动,不可操作
oImg.hasControls = false; 只能移动不能(编辑)操作 oImg.hasBorders = false; 去掉边框,可以正常操作 hasRotatingPoint = false; 不能被旋转 hasRotatingPoint 控制旋转点不可见
fabric.Image.fromURL("300.jpg", function (oImg) {
canvas.add(oImg);
oImg.hasControls = oImg.hasBorders = false;
});
福利环节
简易画板程序GitHub地址:https://github.com/vipstone/drawingboard
fabric.js使用秘籍:https://github.com/vipstone/drawingboard/blob/master/fabricjs%E4%BD%BF%E7%94%A8%E7%AC%94%E8%AE%B0.md
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript易错点(长期更新)
- Centos7.5配置java环境安装tomcat的讲解
- CSS3卡片光照效果
- Linux文本查找命令find的用法详解
- Canvas系列(2):曲线图形
- Shell中去除字符串里的空格或指定字符的方法
- 使用‘fsck’修复Linux中文件系统错误的方法
- linux/OSX中“DD”命令制作ISO镜像操作系统安装U盘的方法
- 《高效能程序员的修炼》读书笔记
- linux之centos7防火墙基本使用详解
- Ubuntu安装scrcpy完成手机投屏和控制(Ubuntu用QQ微信的另一种方法)
- CentOS7 systemd添加自定义系统服务的方法
- Linux中sudo、su和su -命令的区别小结
- 非零环绕规则
- Linux被中断的系统如何调用详解