fabric方法、事件、对象
方法
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 自由绘笔触宽度 canvas.setZoom(2); 设置画板缩放比例
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个像素。
可绘制对象
fabric.Circle 圆 fabric.Ellipse 椭圆 fabric.Line 直线 fabric.Polygon 多边形 fabric.Polyline 交叉线、折线 fabric.Rect 矩形 fabric.Triangle 三角形
图片去掉选中边框和旋转,且只能移动,不可操作
oImg.hasControls = false; 只能移动不能(编辑)操作 oImg.hasBorders = false; 去掉边框,可以正常操作 hasRotatingPoint = false; 不能被旋转 hasRotatingPoint 控制旋转点不可见 scaleToHeight(value, absolute) 缩放图片高度到value scaleToWidth(value, absolute) 缩放图片宽度到value
示例代码如下:
fabric.Image.fromURL("img.jpg", function (oImg) {
img.scaleToHeight(400, false); //缩放图片的高度到400
img.scaleToWidth(400, false); //缩放图片的宽度到400
canvas.add(oImg);
oImg.hasControls = oImg.hasBorders = false;
});
相关文章
- WebForm的Grid页面页脚DropDownList事件[通俗易懂]
- html复选框选中与未选中触发事件的方法
- 【EventBus】EventBus 源码解析 ( 事件发送 | 发布线程为 子线程 切换到 主线程 执行订阅方法的过程分析 )
- SQLServer 错误 825 在失败 %d 次(错误: %ls)之后,按偏移量 %#016I64x 对文件“%ls”读取成功。 SQL Server 错误日志和系统事件日志中的其他消息中可能有更详细的信息。 此错误情况威胁到数据库的完整性,因此必须予以更正。 请运行一次完整的数据库一致性检查 (DBCC CHECKDB)。 此错误可能是由多种因素导致的;有关详细信息,请参阅 SQL Server 联机丛书。 故障 处理 修复 支持远程
- Oracle 等待事件 control file parallel write 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 dispatcher timer 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 gc current block lost 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 log file switch (archiving needed) 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 optimizer stats update retry 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 sbtbufinfo 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 unbound tx 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 Enqueues:SC,SystemChangeNumber 官方解释,作用,如何使用及优化方法
- 深入探究Oracle等待事件分析(oracle等待事件查看)
- 记录一次从《延禧攻略》扯出微信灰色产业链的事件
- 解决方法MySQL建立事件失败,如何解决(mysql不能建事件)
- “阿里女员工称酒后被侵害”事件仍然扑朔迷离
- C#DoubleClick与MouseDoubleClick区别,双击事件引发顺序
- 图片onload事件触发问题解决方法
- Win2003的事件跟踪程序关闭与显示的方法(组策略与注册表)
- onkeydown事件解决按回车键直接提交数据的需求
- 阻止事件(取消浏览器对事件的默认行为并阻止其传播)
- 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
- JQuery给元素绑定click事件多次执行的解决方法
- jquery新建的元素事件绑定问题解决方案
- jquery单选框radio绑定click事件实现方法
- JQuery给元素绑定click事件多次执行的解决方法
- AndroidTouch事件分发过程详解