|
|
# 画布
# 基础画布
相信大家在
光速入门
章节就已经了解到如何使用
fabric.js
创建画布。
要创建基础画布，需要以下2步
-
创建
<canvas>元素，该元素需要一个id属性。 -
使用
new fabric.Canvas('canvas元素的id')绑定<canvas>元素。
画布创建完成后可以使用鼠标在画布上做框选操作。
<!-- 【第1步】 -->
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 【第2步】
const canvas = new fabric.Canvas('c')
</script>
# 设置画布宽高
设置画布宽高有多种方法，这里列举常用的3种
-
在
<canvas>元素上设置。 -
在创建画布 (
new fabric.Canvas) 时设置。 -
通过
js动态设置。
#
在创建
<canvas>
元素时设置
众所周知，
<canvas>
元素的宽高是不建议用
css
设置的。
通常会直接设置
<canvas>
元素的
width
和
height
属性。
需要注意的是：
width
和
height
只需传入数值，不需传入单位（比如
px
这类单位）。
<canvas width="400" height="400"></canvas>
#
在
new fabric.Canvas
时设置
使用
new fabric.Canvas()
创建画布时，第一个参数要传入
<canvas>
元素，或者传入
<canvas>
的
id
也行。第二个参数可以传入一个“描述画布的对象”。
也就是说，可以在第二个参数中设置画布的宽高，同样只需要传入一个数值，不需要传入单位名称。
<canvas id="c" width="400" height="400"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
new fabric.Canvas('c', {
width: 100,
height: 100
</script>
在这个例子中，在
<canvas>
元素和
new fabric.Canvas
时都对宽高属性进行了设置，但最终会
以
new fabric.Canvas
中的设置为准
。
#
通过
js
动态设置
fabric.js
提供了3个方法可以在后期修改画布宽高
-
canvas.setWidth(width)：设置画布宽度 -
canvas.setHeight(height)：设置画布高度 -
canvas.setDimensions({width, height})：设置画布大小
<div>
<button onclick="setWidth()">宽度设为500</button>
<button onclick="setHeight()">高度设为250</button>
<button onclick="setDimensions()">宽度设为100，高度设为100</button>
</div>
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
let canvas = new fabric.Canvas('c')
// 设置canvas宽度500
function setWidth() {
canvas.setWidth(500)
// 设置canvas高度为250
function setHeight() {
canvas.setHeight(250)
// 同时设置canvas的宽高
function setDimensions() {
canvas.setDimensions({
width: 100,
height: 100
</script>
# 背景色
给画布设置背景色的方法有2个：
-
实例化
fabric时设置背景色 -
使用
setBackgroundColor设置背景色
#
实例化
fabric
时设置背景色
使用
new fabric.Canvas()
时可以传入一个描述画布的对象，此时就可以设置画布背景色(
backgroundColor
)。
<canvas id="c"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
new fabric.Canvas('c', {
backgroundColor: 'hot#aa96da' // 将背景色设置为亮粉色
</script>
可以给
backgroundColor
设置一个颜色类型的字符串值。
# setBackgroundColor
除了在初始化时设置画布背景色，还可以使用
setBackgroundColor()
在运行时设置背景色。
setBackgroundColor()
语法：
setBackgroundColor(backgroundColor, callback)
-
backgroundColor: 可传入字符串类型的颜色值，也可以传入一个对象。传入对象时可以设置背景图 -
callback: 回调函数，修改完背景色后需要在回调函数里刷新一下画布
<div>
<button onclick="toggle()">蓝色 / 橙色</button>
</div>
<canvas id="c"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 'coral' 橙色
// 'deepskyblue' 蓝色
let color = 'coral'
// 修改背景颜色
function toggle() {
color = color === 'coral' ? 'deepskyblue' : 'coral'
// 设置(修改)画布背景颜色
canvas.setBackgroundColor(
color,
canvas.renderAll.bind(canvas) // 回调函数，刷新画布。如果不写这句，背景色会修改，但不会在画布上呈现出来，需要执行下一帧刷新才会呈现。
// 初始化画布
let canvas = new fabric.Canvas('c', {
backgroundColor: color // 初始化时给画布设置一个颜色
</script>
如果
setBackgroundColor()
第一个参数传入的是一个对象时，可以通过
source
属性传入一张图片做背景图。
setBackgroundColor()
第一个对象参数还可以设置如下属性：
-
source: 图源 -
repeat: 是否重复渲染。默认是重复渲染的。可选值有这些：'repeat'、'no-repeat'、'repeat-x'、'repeat-y' -
offsetX: x轴方向的偏移量 -
offsetY: y轴方向的偏移量
<div>
<button @click="setBgImg">设置背景图</button>
</div>
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 设置canvas宽度500
function setBgImg() {
// 设置(修改)画布背景图
canvas.setBackgroundColor(
source: '/images/bubble.jpg', // 图片路径（可以是本地图片，也可以是网图地址）
// offsetX: 100, // x轴方向的偏移量
// offsetY: 100, // y轴方向的偏移量
// repeat: 'repeat' // 背景是否重复，默认: 'repeat'。可选值: 'repeat'、'no-repeat'、'repeat-x'、'repeat-y'
canvas.renderAll.bind(canvas)
// 初始化画布
let canvas = new fabric.Canvas('c', {
width: 500,
height: 500
</script>
# 背景图
虽然设置背景色时也能使用图片，但如果你真的需要使用背景图， 我建议使用
backgroundImage
。
# 导入背景图
导入背景图非常简单，可以在实例化
fabric
时通过设置
backgroundImage
属性使用背景图。也可以在创建完画布后，使用
setBackgroundImage()
方法设置背景图。
我更推荐的方式是使用
setBackgroundImage()
。
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
new fabric.Canvas('c', {
width: 300,
height: 300,
backgroundImage: '/images/cookie.jpg' // 设置背景图，可以是本地图片，也可以是网络图片
canvas.setBackgroundImage(
'/images/bubble.jpg',
canvas.renderAll.bind(canvas)
</script>
上面的例子中同时使用了
backgroundImage
和
setBackgroundImage()
，最后会使用
setBackgroundImage()
导入的背景图。
其实除了直接使用
setBackgroundImage()
设置背景图之外，还可以使用
fabric.Image.fromURL()
，但这个我打算放在 图片
Image
章节在说。现在先关注回
setBackgroundImage()
。
backgroundImage
的用法很简单，它值接受一个图片地址，本地或者网络图片地址都行。
我们重点关注的是
setBackgroundImage()
，该方法接受3个参数，语法如下：
canvas.setBackgroundImage(image, callback, options)
-
image: 图片地址 -
callback: 图片加载完的回调函数，通常在此刷新画布 -
options: 图片参数设置（非必填）
接下来的几小节都使用到
setBackgroundImage()
的第三个参数设置背景图的样式。
# 旋转背景图
画布的背景不像图形元素那样可以直接用鼠标选中操作。
如果想旋转背景图，可以通过
setBackgroundImage()
第三个参数设置。
<canvas id="c"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
new fabric.Canvas('c', {
width: 300,
height: 300,
backgroundImage: '/images/cookie.jpg' // 设置背景图，可以是本地图片，也可以是网络图片
canvas.setBackgroundImage(
'/images/bubble.jpg',
canvas.renderAll.bind(canvas),
angle: 10 // 旋转背景图
</script>
# 前景色
前景色可以从视觉上覆盖画布中所有内容。
# 前景色纯色
使用
overlayColor
可以设置前景色。
前景色会覆盖页面中所有内容。
本例在画布中添加了一个矩形，但因为设置了 前景色
overlayColor
，所以从视觉上是看不到矩形的。但如果此时你用鼠标在画布的左上方移动，鼠标指针会有所变化。也就是说矩形是真实存在的，而且可以被操作。只是覆盖了一层前景色导致视觉上看不到矩形。
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
let canvas = new fabric.Canvas('c', {
overlayColor: '#f6416c'
let rect = new fabric.Rect({
top: 10,
left: 10,
width: 60,
height: 60
canvas.add(rect)
</script>
# 前景色也能插图？
我们知道使用
setBackgroundColor()
可以用图片设置背景色。所以 前景色
overlayColor
是不是也有
setOverlayColor()
呢~
setOverlayColor()
的用法和
setBackgroundColor()
差不多，
setOverlayColor()
第一个参数是对象，该对象里有一个
source
属性可以设置图片位置；第二个参数是回调函数，主要用来刷新画布。
<div>
<button @click="setOverlayImg">设置前景图</button>
</div>
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 初始化画布
let canvas = new fabric.Canvas('c')
// 设置canvas前景图
function setOverlayImg() {
// 设置(修改)画布前景图
canvas.setOverlayColor(
source: '/images/bubble.jpg', // 图片路径（可以是本地图片，也可以是网图地址）
// offsetX: 100, // x轴方向的偏移量
// offsetY: 100, // y轴方向的偏移量
// repeat: 'repeat' // 前景是否重复，默认: 'repeat'。可选值: 'repeat'、'no-repeat'、'repeat-x'、'repeat-y'
canvas.renderAll.bind(canvas)
</script>
# 前景图
使用
overlayImage
和
setOverlayImage()
都可以设置前景图。
overlayImage
通常在初始化画布时使用，
setOverlayImage()
则更方便后期（用户使用期间）设置前景图。
setOverlayImage()
可以传入3个参数：
- 参数1：图片路径，必传
- 参数2：回调函数，通常用在刷新画布，必传
- 参数3：图片样式，非必传
<div>
<button @click="setOverlayImage">设置前景图</button>
</div>
<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 fabric.js -->
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 初始化画布
let canvas = new fabric.Canvas('c', {
overlayImage: '/images/jail_cell_bars.png' // 在初始化画布时设置前景图
// 矩形
let rect = new fabric.Rect({
top: 10,
left: 10,
width: 60,
height: 60,
fill: 'CornflowerBlue'
canvas.add(rect)
// 手动设置前景图
function setOverlayImage() {
// 设置(修改)画布前景图
canvas.setOverlayImage(
'/images/bubbleCat.jpg',
canvas.renderAll.bind(
canvas),
angle: 20 // 旋转
</script>