使用FabricJS画出简单图形
使用FabricJS画出简单图形
关于FabricJS Fabricjs是一个开源的基于canvas的web交互的js库,开源协议MIT,并有很多贡献者。 Fabric 提供了canvas 渲染的对象模型,也能对SVG进行了很好的解析和交互,并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染,直接让我们对对象进行操作即可。 下载FabricJS 请在任意搜索引擎或者GitHub搜索并下载FabricJS 画一个简单的图形 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../fabric.js"></script> </head> <style> canvas { border: 1px rgb(0, 0, 0) solid; } </style> <body> <canvas id="c" width="800" height="800"></canvas> </body> <script> var canvas = new fabric.Canvas("c"); var rect = new fabric.Rect({ left: 100, top: 100, fill: "red", width: 100, height: 100 }) var circle = new fabric.Circle({ radius: 50, fill: "green", left: 200, top: 200, height: 200, }) var triangle = new fabric.Triangle({ width: 80, height: 100, fill: "pink", left: 300, top: 300 }) canvas.add(rect); //正方形 canvas.add(circle); //圆形 canvas.add(triangle); //三角形 </script> </html> API介绍 绘制图形 fabric.Rect({}) 方形 left:0, // 距离画布左侧的距离 top:0, // 距离画布上边的距离 fill:'oink', // 背景颜色 width:10, // 宽度 height:10 // 高度 更多属性不一一赘述 fabric.Circle({}) 圆形 同方形 fabric.Triangle({}) 三角形 同方形 fabric.Pat({M x y L x1 y1 L x2 y2 z}) 多边形 M表示起点,从坐标为x、y点起步,画到L x1、y1点 ,然后在画到L x2、y2点,最后z表示闭合改图形 fabric Image() 通过元素插入图片 fromURL() 通过URL插入图片 事件 在fabric中,提供了很多不同的事件 mouse(鼠标事件) move:按下且移动 down:按下时 up:按下抬起时 dblclick:双击时 mouseout:离开元素时 mousewheel:滚轮事件 selection created 初次选中图层 updated 图层选择变化 cleared 清空图层选中 after- render画布重绘后 object(对象) selected:被选中 deselected:取消选中 moving:移动 rotating:旋转 added:添加 removed:移除 modified:调整 set与get obj.set()通常设置属性的方式有两种,第一种是在绘制的时候添加进去。 另一种是通过set方法设置 例:obj.set({color:''}) 注意:需canvas.add(obj)刷新页面 obj.get() 有set方法自然就有get方法 例:obj.getXXX 获取相应属性的属性值 组别 fabric.Group([x,y],{}) Group属性可以将x与y两个fabric实例组合成一个组别,在页面上显示出来 序列化和反序列化 toJSON(序列化) 导出画布信息 loadFromJSON(反序列化) 将导出的信息还原成画布 注意事项 obj.renderAll()所有图层的操作之后,都需要调用这个方法刷新 obj.add()将场景加入画布中 操作案例 图层移动 // 上移图层 obj.bringForward(); // 下移图层 obj.sendBackwards(); // 使用canvas对象的moveTo方法,移至图层到指定位置 card.moveTo(obj, index); // 旋转图层 obj.rotate(angle) // 翻转图层,沿着X轴或者Y轴翻转 obj.set({ scaleX/Y: -this.selectedObj.scaleX/Y,}) // 删除图层 obj.remove()在进行相应操作后都需要canvas.renderAll()重新刷新画布,否则操作不生效 查询组件 canvas.item(index:number) 查找第index个添加到canvas的组件
 2022-3-20
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录