对于前端而言,离不开canvas就像鱼离不开水,前端canvas神器fabric你值得拥有!接下来我们就来一步步揭开她的面纱。
一、fabric的理解
用原生的canvas
来实现,代码量会比较大,而且还要处理很多细节,而Fabric就是解决这些问题。如果说有什么功能能让canvas
在眼前一亮,那一定是它能够很好的支持自由绘图!由于画布只是一个2D位图, Fabric为我们提供了一张纸:可以自由绘画,而且非常自然。
只需将Fabric canvas的isDrawingMode
属性设置为true
即可实现自由绘制模式。这样画布上的点击和移动就会被立刻解释为铅笔或刷子。
先安排一个vue中使用的例子:
<template><div class="app"><canvas id="canvas" width="300" height="200"></canvas></div>
</template><script>
import * as fabric from "fabric"
export default {mounted(){var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});var rect = new fabric.Rect({left:100,top:100,fill:"red",width:20,height:20,});canvas.add(rect);}
}
</script>
效果如下图:
在Fabric中,我们对对象进行操作——实例化它们,更改其属性并将其添加到画布。这些对象是直接操作canvas的语法糖。
二、Fabric.js
基础对象
基础对象:
fabric.Rect 矩形
fabric.Circle 圆形
fabric.Triangle 三角形
fabric.Ellipse 椭圆
fabric.Line 线型
fabric.Polyline 折线
fabric.Polygon 多边形
方法:
add(object) 添加
remove(object) 移除
forEachObject 循环遍历
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
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() 设置坐标
三、操作对象
我们更改某些鼠标交互时的对象属性(颜色,不透明度,大小,位置)。
Fabric和vue一样,数据驱动视图,我们只要变更对应对象的属性值,就可以驱动视图发生相应的变化。这些可供修改的属性,都与定位有关——left、top;尺寸——width、height;渲染——fill、opacity、stroke、strokeWidth;缩放和旋转——scaleX、scaleY、angle;甚至与翻转相关的内容——flipX、flipY和倾斜的skewX、skewY。
//读取
obj.get('属性名')
//设置
obj.set({属性名:属性值})
polygon.set("fill", "blue").set("stroke", "red");//将上文的多边形填充和边框颜色变更
//改变层级
下移:canvas.sendBackwards(canvas.getActiveObject());
上移:canvas.bringForward(canvas.getActiveObject());
置顶:canvas.bringToFront(canvas.getActiveObject());
置底:canvas.sendToBack(canvas.getActiveObject());//自定义原型对象属性方法
fabric.Object.prototype.getWidth = function () {return this.get("width");
};//新建画布对象const canvas = new fabric.Canvas("canvas", {backgroundColor: "pink",selectionColor: "blue",selectionLineWidth: 2,});// 多边形const polygon = new fabric.Polygon([{x: 100,y: 10,},{x: 250,y: 10,},{x: 250,y: 180,},{x: 150,y: 180,},],{left: 100,top: 50,fill: "red",strokeWidth: 4,stroke: "green",perPixelTargetFind: true,});canvas.add(polygon);console.log("获取宽度", polygon.getWidth());
// 图像对象 本地和网络图片
<template><div id="app"><!-- 1、创建 canvas 元素 --><canvaswidth="800"height="800"id="canvas"style="border: 1px solid #ccc"></canvas><imgsrc="@/assets/imgs/ai1.jpeg"alt="picture"id="img"width="100"height="auto"@load="imageLoad"/></div>
</template><script>
//引入fabric
import * as fabric from "fabric";
export default {name: "App",components: {},mounted(){// var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});// var rect = new fabric.Rect({// left:100,// top:100,// fill:"red",// width:20,// height:20,// });// canvas.add(rect);//在画布对象上添加这个矩形// // 位移// rect.set({left:20,top:50});//修改举行对象的位置属性// canvas.renderAll()//修改完之后重新渲染},data() {return {};},methods: {imageLoad() {var canvas = new fabric.Canvas("canvas",{backgroundColor:"rgb(100,200,200)"});const imgElement = document.getElementById("img");const imgInstance = new fabric.Image(imgElement, {left: 100,top: 100,angle: 45,opacity: 0.6,});console.log(imgInstance);canvas.add(imgInstance);},},
};
</script><style scoped lang="scss"></style>
好,到这里我们对 Fabric 有了基本的了解,后面章节,我们进入实战,开发一个画板编辑器