Fabric.js學習筆記
阿新 • • 發佈：2018-12-31
因為快要畢業設計開題了，大概找的方向需要用到canvas畫圖，但是畫起來real麻煩，就找呀找，發現了Fabric.js，然後就開始學習，發現了勝洪宇老師的教程，做了一下學習筆記，敲了一下程式碼放在了github上，歡迎大家參考～～
GitHub地址：https://github.com/YZlingyu/fabric.js
下面就是筆記正文啦～
1、 Fabric.js能做的事情：
1）在canvas上建立、填充圖形（包括圖片、文字、規則圖形和複雜路徑組成圖形）
2）給圖形填充漸變顏色
3）組合圖形（包括組合圖形、圖形文字、圖片等）
4）設定圖形動畫集使用者互動
5）生成JSON, SVG資料等。
一、準備
1. Fabric不需要安裝，只要在官網或GitHub上下載fabric.js，使用<script>標籤引入即可
二、繪製圖形
繪製圖形需要三部曲：
1. 繪製規則圖形
1）宣告畫布：
var canvas =new fabric.Canvas('main');var rect = new fabric.Rect({
left:100,//距離畫布左側的距離，單位是畫素
top:100,//距離畫布上邊的距離
fill:'red',//填充的顏色
width:30,//方形的寬度
height:30//方形的高度
});繪製方形：var rect = new fabric.Rectcanvas.add(rect);
繪製圓形：var
circle = new fabric.Circle
繪製三角形：var
triangle = new fabric.Triangle
2. 繪製不規則圖形：
使用路徑繪圖：用點和線的移動的方式進行繪圖。通過對 線、曲線、弧的應用繪製非常複雜的圖形。
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);三、對圖片的操作：
1. 插入圖片：
1）在html中插入圖片
<body>
<canvas id="canvas" width='800' height='800'></canvas>
<img src="./2.png" id="img">
<script type="text/javascript" src="./script.js"></script>
</body>var canvas = new fabric.Canvas('canvas');//宣告畫布
var imgElement = document.getElementById('img');//宣告我們的圖片
var imgInstance = new fabric.Image(imgElement,{ //設定圖片在canvas中的位置和樣子
left:100,
top:100,
width:200,
height:100,
angle:30//設定旋轉
});
canvas.add(imgInstance);//加入到canvas中<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../fabric.js"></script>
<style>
body{background-color: #ccc;}
#canvas{display:block;background-color:#fff;border:1px solid #000;}
</style>
</head>
<body>
<canvas id="canvas" width='800' height='800'></canvas>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('./2.png', function(oImg) {
oImg.scale(0.1);//圖片縮小10倍
canvas.add(oImg);
});2. 過濾器：類似於濾鏡
通過object.filters.push():新增過濾器，可以選擇需要的過濾器
object.applyFilters():在畫布渲染結束後應用過濾器進行圖片渲染。
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('2.jpg', function(img) {
//新增過濾器
img.filters.push(new fabric.Image.filters.Grayscale());
//應用過濾器並重新渲染畫布執行
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img);//把圖片新增到畫布上
});四、對顏色的處理
1. 顏色的定義方式：hex（16進位制），RGB, RGBA
new fabric.Color('#f55');
new fabric.Color('#123123');
new fabric.Color('356735');
new fabric.Color('rgb(100,0,100)');
new fabric.Color('rgba(10, 20, 30, 0.5)');
2. 轉換方式：
new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"3. 漸變色：
circle.setGradient('fill', {
//色標的位置
x1: 0,
y1: 0,//圓的最上沿位置
x2: 0,
y2: circle.height ,//圓的最下沿位置
//漸變的顏色
colorStops: {
0: '#000',
1: '#fff'
}
});x座標不變，則是縱向變換，y座標不變則是橫向變換。
colorStops: {
0: "red",
0.2: "orange",
0.4: "yellow",
0.6: "green",
0.8: "blue",
1: "purple"
}//彩虹的效果五、文字設定：
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);可以對文字的屬性進行設定：
字型樣式：fontFa mi ly: 'Comic Sans'
字型大小：fontSize: 40
字型加粗：fontWeight: 'bold'//加粗字型
字型textdecoration：textDecoration: 'underline'
六、使用者互動：on()
1）對畫布的互動
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY)
})2）對畫布上物件的操作：
var canvas = new fabric.Canvas('canvas');
//方形
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {//選中監聽事件
console.log('selected a rectangle');
});
//圓形
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
console.log('selected a circle');
});
canvas.add(rect);
canvas.add(circle);
3）監聽事件：
- mouse:down :滑鼠按下時
- mouse:move :滑鼠移動時
- mouse:up :滑鼠擡起時
- after:render :畫布重繪後
- object:selected:物件被選中
- object:moving:物件移動
- object:rotating:物件被旋轉
- object:added:物件被加入
- object:removed物件被移除
rect.animate('angle',360,{
onChange:canvas.renderAll.bind(canvas)
})1）自增，讓方形相對於現在的位置向左移動100px：
rect.animate('left','+=100',{onChange:canvas.renderAll.bind(canvas)});2）自減，方形相對於現在的角度逆時針旋轉5度：
rect.animate('angle','-=5',{onChange:canvas.renderAll.bind(canvas)});3）duration:設定動畫持續的時間
duration:1000,4）easing:設定動畫的緩動屬性
easing:fabric.util.ease.easeOutBounce八、組合
1）new fabric.Group():接受兩個引數：要組合物件名稱組成的陣列、組合到一起的物件的共同屬性。
var canvas = new fabric.Canvas('canvas');
//繪製圓形
var circle = new fabric.Circle({
radius: 100,
fill: '#eef',
scaleY: 0.5,
originX: 'center',//調整中心點的X軸座標
originY: 'center'//調整中心點的Y軸座標
});
//繪製文字
var text = new fabric.Text('Hello World', {
fontSize: 30,
originX: 'center',
originY: 'center'
})
//進行組合
var group = new fabric.Group([circle, text], {
left: 150,
top: 100,
angle: 10
})
canvas.add(group);group.item(0).setFill('red');
group.item(1).set({
text: 'trololo',
fill: 'white'
});
3）在組合中再次加入圖形
group.add(new fabric.Rect({
fill: 'blue',
width: 100,
height: 100,
originX: 'center',
originY: 'center'
}));//不更新組合區域，可能後加入的圖形不能顯示完全group.addWithUpdate(new fabric.Rect({//更新組合區域
...
left: group.getLeft(),
top: group.getTop(),
originX: 'center',
originY: 'center'
}));var group = new fabric.Group([
canvas.item(0).clone(),
canvas.item(1).clone()
]);
// remove all objects and re-render
canvas.clear().renderAll();
// add group onto canvas
canvas.add(group);5）組合圖片:層層巢狀
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('1.png', function(img) {
var img1 = img.scale(0.1).set({
left: 100,
top: 100
});
fabric.Image.fromURL('2.png', function(img) {
var img2 = img.scale(0.1).set({
left: 175,
top: 175
});
fabric.Image.fromURL('1.png', function(img) {
var img3 = img.scale(0.1).set({ left: 250, top: 250 });
canvas.add(new fabric.Group([img1, img2, img3], { left: 200, top: 200 }));
});
});
});
1）序列化：
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
console.log(JSON.stringify(canvas.toJSON()));2）反序列化：
var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null3）svg：
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
console.log(canvas.toSVG());