Fabric.js 画布基础功能

原文出处：Fabric.js 从入门到________

Fabric.js 简介

Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。

如果你需要用 canvas 做特效，那我推荐你使用 Fabric.js ，因为 Fabric.js 语法更加简单易用，而且还提供了很多交互类的 api。

Fabric.js 简化了很多 Canvas 里的概念，代码看上去也更加语义化。

Fabric.js 能做什么？

可以打开 『Fabric.js 官网首页』 直接看例子，也可以看看 『Fabric.js Demos』 查看更炫酷的例子。

本文简介

本文主要讲解 Fabric 提供的基础 画布 操作，包含一下内容

• 安装 Fabric.js
• 画布基础版（可交互）
• 不可交互的画布
• 在 js 设置画布参数
• 使用背景图
• 旋转背景图
• 拉伸背景图
• 重复背景图
• 重叠影像

本文在案例在 Vue3 环境下使用，不懂 Vue3 也没关系，因为不会涉及多少 Vue 的知识。

相关链接

原文出处：Fabric.js 从入门到________

『Fabric.js npm地址』

『Fabric.js github地址』

本文案例在线预览

本文所有案例仓库地址 【欢迎Star，不定期更新！！！】

动手！

安装 Fabric.js

CDN

npm

npm i fabric --save

14.jpg

基础版（可交互）

005.gif

基础版就是“起步”章节所说的那个例子。

11.gif

不可交互

006.gif

创建不可交互的画布，其实只需把 new fabric.Canvas 改成 new fabric.StaticCanvas 即可。

55.gif

在js设定画布参数

007.png

new fabric.Canvas 的第二个参数是用来设置画布基础功能的。更多配置参数可以查看 『官方文档』。

75.jpg

使用背景图

008.png

setBackgroundImage 这个很好懂，设置背景图片。

需要注意的是，在 Fabric.js 里使用 gif 只会渲染第一帧。

旋转背景图

009.png

setBackgroundImage 还有第三个参数，嘿嘿嘿没想到吧

第三个参数除了旋转，还可以设置 scaleX、scaleY 之类的操作。

更多设置可以查看 『文档』 。

但这个例子存在一个问题，如果图片的尺寸没 canvas 容器大，就填不满，否则就溢出（只显示图片的局部）。

解决方案请看下一个案例。

拉伸背景图

011.png

这个例子使用了 fabric.Image.fromURL 这个 api 来加载图片，第一个参数是图片地址，第二个参数是回调函数。

拿到图片的参数和画布的宽高进行计算，从而使图片充满全屏。

重复背景图

012.png

这个例子使用的图片尺寸是比较小的，所以在 setBackgroundColor 的第3个参数中设置了 repeat: 'repeat' ，表示重复渲染图片。

重叠影象

013.gif

值得注意的2点：

1. 使用 canvas.setOverlayImage 代替原本的 canvas.setBackgroundImage 。
2. 所使用的图片最好是带透明层的 png ，这样就能展示案例所示的效果，背景图叠在图案元素上面。

014.png

本例所使用的图片地址

更多推荐

Fabric.js 从入门到__

Fabric.js渐变(Gradient)效果，包括径向渐变radial

console.log也能插图！！！