上海建设工程安全监理网站,网站开发这个专业前景怎样,免费网站申请注册,景德镇网站建设本文介绍fabric.js框架使用#xff0c;以及使用fabricjs打造一个高级画板程序.
高级画板功能介绍
全局绘制颜色选择护眼模式、网格模式切换自由绘制画箭头画直线画虚线画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形文字输入图片展示及相关移动、缩放等操作删除功能
以及使用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.Polygonfabric.Polylinefabric.Rect 矩形fabric.Triangle 三角形 方法
add(object) 添加insertAt(object,index) 添加remove(object) 移除forEachObject 循环遍历 getObjects() 获取所有对象item(int) 获取子项isEmpty() 判断是否空画板size() 画板元素个数contains(object) 查询是否包含某个元素fabric.util.cosfabric.util.sinfabric.util.drawDashedLine 绘制虚线getWidth() setWidth()getHeight()clear() 清空renderAll() 重绘requestRenderAll() 请求重新渲染rendercanvas() 重绘画板getCenter().top/left 获取中心坐标toDatalessJSON() 画板信息序列化成最小的jsontoJSON() 画板信息序列化成jsonmoveTo(object,index) 移动dispose() 释放setCursor() 设置手势图标getSelectionContext()获取选中的contextgetSelectionElement()获取选中的元素getActiveObject() 获取选中的对象getActiveObjects() 获取选中的多个对象discardActiveObject()取消当前选中对象 isType() 图片的类型setColor(color) canvas.set(full,);rotate() 设置旋转角度setCoords() 设置坐标 事件
object:addedobject:removedobject:modifiedobject:rotatingobject:scalingobject:movingobject:selected 这个方法v2已经废弃使用selection:created替代多选不会触发before:selection:clearedselection:clearedselection:updatedselection:createdpath:createdmouse:downmouse:movemouse:upmouse:overmouse:outmouse: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:Arrayexample 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
