Canvas实用库Fabric.js的使用入门

·  阅读 2501

Fabric.js是一个用于可以简化Canvas程序编写的库,Canvas是浏览器为html5提供一个好的画布能力, 但是Api使用不够友好,很繁琐。工作中绘制简单图形其实还可以。 如果做一些复杂的图形绘制, 编写一些复杂的效果,和逻辑就不是那么方便了。Fabric.js就是为此而开发,它主要就是用对象的方式使用canvas。

安装Fabric包,并且在项目中引用

命令行安装Fabric.js

npm install fabric --save

项目中引入

import { fabric } from 'fabric';

简单的形状绘制

// 声明画布
var canvas =new fabric.Canvas('main');
// 绘制一个方形
var rect = new fabric.Rect({
    left:10, // 距离左侧的距离
    top:10, // 距离上边的距离
    fill:'#000', // 填充颜色
    width:20, // 宽度
    height:20 // 高度
});
// 将绘制的图形添加到画布
canvas.add(rect);
复制代码
  • 方形 var rect = new fabric.Rect
  • 圆形 var circle = new fabric.Circle
  • 三角形 var triangle = new fabric.Triangle

操作和绘制图片

  • 1、获取html中的img,进行插入
<body>
   <canvas id="canvas" width='300' height='300'></canvas>
   <img src="img.png" id="img">
</body>
<script>
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('img');  
var canvasImg = new fabric.Image(imgElement,{
   left:10,
   top:10,
   width:20,
   height:10,
}); 
canvas.add(canvasImg);//加入到canvas中
</script>
复制代码
  • js直接插入图片
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('img.png', function(oImg) {
   canvas.add(oImg);
}); 
复制代码

事件监听

  • 1、canvas画布事件
// 监听鼠标在画布中按下的事件
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(e) {
   console.log(e);
})
// mouse:down:鼠标按下时
// mouse:move:鼠标移动时
// mouse:up:鼠标抬起时
复制代码
  • 2、画布上对象的事件
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({ width: 10, height: 10, fill: '#000000' });
rect.on('selected', function() {//选中监听事件
    
});
// after:render:画布重绘
// object:selected:选中
// object:moving:移动
// object:rotating:旋转
// object:added:加入
// object:removed:移除
复制代码

序列化与反序列化

  • 1、序列化(将canvas绘制的图形转化为一个fabric反序列化可用的json数据)
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    width: 10,
    height: 10,
    fill: '#000000'
});
canvas.add(rect);
console.log(canvas.toJSON());
复制代码
  • 2、反序列化
var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[{"type":"rect","left":0,"top":0,"width":10,"height":10,"fill":"#000000","overlayFill":null}')
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改