vue2+Fabric.js库的使用(3)--Fabric的画布详解
本文介绍了Fabric画布的一些操作,便于了解画布的一些延展,为后续项目做基础
文章目录
前言
本文会介绍Fabric画布的使用,以及画布的一些属性设置
提示:以下是本篇文章正文内容,下面案例可供参考
一、画布基础设置
1.宽高设置
设置画布宽高有多种方法,常用的3种为:
1.1 在 元素上设置
<canvas width="400" height="400"></canvas>
1.2在创建画布 ( new fabric.Canvas ) 时设置
this.canvas = new fabric.Canvas('c', {
width: 100,
height: 100
})
1.3通过 js 动态设置
canvas.setWidth(width):设置画布宽度
canvas.setHeight(height):设置画布高度
canvas.setDimensions({width, height}):设置画布大小
// 设置canvas宽度500
function setWidth() {
canvas.setWidth(500)
}
// 设置canvas高度为250
function setHeight() {
canvas.setHeight(250)
}
// 同时设置canvas的宽高
function setDimensions() {
canvas.setDimensions({
width: 100,
height: 100
})
}
2.背景色
画布设置背景色的方法有2个:
2.1 实例化 fabric 时设置背景色
this.canvas = new fabric.Canvas('c', {
backgroundColor: 'hot#aa96da' // 将背景色设置为亮粉色
})
2.2 使用 setBackgroundColor 设置背景色
setBackgroundColor() 语法:
setBackgroundColor(backgroundColor, callback)
backgroundColor: 可传入字符串类型的颜色值,也可以传入一个对象。传入对象时可以设置背景图
callback: 回调函数,修改完背景色后需要在回调函数里刷新一下画布
// 设置(修改)画布背景颜色
this.canvas.setBackgroundColor(
'red',
this.canvas.renderAll.bind(canvas) // 回调函数,刷新画布。如果不写这句,背景色会修改,但不会在画布上呈现出来,需要执行下一帧刷新才会呈现。
)
如果 setBackgroundColor() 第一个参数传入的是一个对象时,可以通过 source 属性传入一张图片做背景图。
setBackgroundColor() 第一个对象参数还可以设置如下属性:
- source: 图源
- repeat: 是否重复渲染。默认是重复渲染的。可选值有这些:‘repeat’、‘no-repeat’、‘repeat-x’、‘repeat-y’
- offsetX: x轴方向的偏移量
- offsetY: y轴方向的偏移量
// 设置(修改)画布背景图
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)
)
3.背景图片
画布设置背景图的方法有2个:
3.1在实例化 fabric 时通过设置 backgroundImage 属性使用背景图
this.canvas = new fabric.Canvas('c', {
backgroundImage: '/images/cookie.jpg' // 设置背景图,可以是本地图片,也可以是网络图片
})
3.2在创建完画布后,使用 setBackgroundImage() 方法设置背景图
这个就是和2中的背景颜色的第二个方法一样,用setBackgroundColor() 这个方法,只是在图片中,还有一个针对图片的属性使用
setBackgroundImage(),该方法接受3个参数,语法如下:
canvas.setBackgroundImage(image, callback, options)
image: 图片地址
callback: 图片加载完的回调函数,通常在此刷新画布
options: 图片参数设置(非必填)
图片参数说明
——旋转背景图
this.canvas.setBackgroundImage(
'/images/bubble.jpg',
this.canvas.renderAll.bind(canvas),
{
angle: 10 // 旋转背景图
}
)
同样,还可以用前面章节的 fabric.Image.fromURL()这个方法使用,可以自己去试试
4.前景色
前景色可以从视觉上覆盖画布中所有内容。即背景色是在绘制的图形的下一层级的,然后前景色是在绘制图形的上一层级的
使用 overlayColor 可以设置前景色
this.canvas = new fabric.Canvas('c', {
overlayColor: '#f6416c'
})
和背景色一样,前景色也可以设置图片:
// 设置(修改)画布前景图
this.canvas.setOverlayColor(
{
source: '/images/bubble.jpg', // 图片路径(可以是本地图片,也可以是网图地址)
// offsetX: 100, // x轴方向的偏移量
// offsetY: 100, // y轴方向的偏移量
// repeat: 'repeat' // 前景是否重复,默认: 'repeat'。可选值: 'repeat'、'no-repeat'、'repeat-x'、'repeat-y'
},
this.canvas.renderAll.bind(canvas)
)
5.绘画模式
画布可以设置是否为绘画模式,在绘画模式中,可以随意的进行画布的绘制,像画笔一样,在非绘画模式下,无法进行绘制
// 初始化画布
this.canvas = new fabric.Canvas('c', {
isDrawingMode: true //开始绘画模式,为false时为关闭
})
所以可以直接调用:this.canvas.isDrawingMode = false 来关闭绘画模式
6.鼠标光标修改
在进行绘制的时候,绘制不同的图形,可以修改鼠标的光标的样式,以适应不同的图形绘制
修改鼠标指针样式,可以设置 defaultCursor 属性。可配置的值和 css 的 cursor 一样
this.canvas.defaultCursor = 'wait'
7.canvas的其它常用属性
canvas.selection = true // 画布是否可选中 默认为true、false:不可选中
canvas.selectionColor = 'transparent' // 画布鼠标框选时的背景色
canvas.selectionBorderColor = 'transparent'// 画布鼠标框选时的边框颜色
canvas.selectionLineWidth = 6 // 画布鼠标框选时的边框厚度
canvas.selectionDashArray = [30, 4, 10] // 画布鼠标框选时边框虚线规则
canvas.selectionFullyContained = true // 只选择完全包含在拖动选择矩形中的形状
canvas.backgroundColor = '#2E3136' // 画布背景色
canvas.hoverCursor = 'pointer' // 鼠标光标样式 default、pointer、move等
canvas.skipTargetFind = true // 整个画板元素不能被选中
canvas.fireRightClick = true // 启用右键,options.button的数字为3
canvas.stopContextMenu = true // 禁止默认右键菜单
二、画布基础方法
1.添加对象
把绘制好的图形添加到画布中
this.canvas.add(object)
2.删除对象
把添加到画布中的对象删除
this.canvas.remove(object)
3.获取所有的对象
获取到绘制在画布中的对象,以数组的形式返回
this.canvas.getObjects()
4.获取选中的对象
获取到绘制在画布中的被选中的对象
this.canvas.getActiveObject()
5.清除画布中所有对象
把绘制在画布中的对象全部清除
this.canvas.clear()
6.重绘对象
修改该图形的参数之后,重新绘制这个图形
this.canvas.renderAll()
7.重新渲染
修改该图形的参数之后,重新渲染这个图形
this.canvas.requestRenderAll()
renderAll和requestRenderAll的比较
requestRenderAll() 方法是异步的,它会在下一次浏览器的重绘周期中重新渲染画布。这个方法通常用于性能优化,可以避免在短时间内重复绘制画布,从而提高应用程序的性能。
renderAll() 方法是同步的,它会立即重新渲染画布。这个方法通常用于需要立即更新画布的情况,例如在添加、删除或修改对象时。
因此,当你需要立即更新画布时,应该使用 renderAll() 方法。而当你需要在一段时间内多次更新画布时,应该使用 requestRenderAll() 方法来避免重复绘制画布,从而提高应用程序的性能。
8.获取画布当前缩放值
this.canvas.getZoom()
9.对象移到最底层
把绘制的图形移动到最底层
this.canvas.sendToBack(object)
10.对象位置设置
this.canvas.viewportCenterObjectH(object) // 水平居中对象
this.canvas.viewportCenterObjectV(object) // 垂直居中对象
this.canvas.viewportCenterObject(object) // 垂直水平居中对象
this.canvas.fxCenterObjectH(object) // 动画水平居中对象
this.canvas.fxCenterObjectV(object) // 动画垂直居中对象
this.canvas.fxCenterObject(object) // 动画垂直水平居中对象
11.序列化与反序列化
把绘制的图形移动到最底层
let canvasJsonData = JSON.stringify(canvas.toJSON()) // 将画布序列化成json数据
let canvasSvgData = canvas.toSVG() // 将画布序列化成svg数据
this.canvas.loadFromJSON(canvasJsonData) // 反序列化Json数据
三、画布的事件
1.常用事件
mouse: down // 鼠标按下事件
mouse: move // 鼠标移动事件
mouse: up // 鼠标移动事件
mouse: over // 鼠标移入事件
mouse: out // 鼠标移出事件
mouse: dblclick // 鼠标双击事件
object: added // 对象被添加事件
object: removed // 对象被删除事件
object: modified // 对象被修改事件
object: rotating // 对象被旋转事件
object: scaling // 对象被缩放事件
object: moving // 对象被移动事件
2.事件绑定
把事件绑定在canvas上
canvas.on('mouse: wheel', (opt) => {
console.log(opt)
})
3.事件解绑
canvas.off('mouse: wheel')
三、画布的其它操作
1.拖拽和缩放画布
拖拽画布:
<script>
export default {
data() {
return {
lastPosX: 0, // 上次鼠标位置X坐标
lastPosY: 0, // 上次鼠标位置Y坐标
isDragging: false, // 是否可以拖拽画布
}
},
mounted() {
... // 初始化canvas
this.canvas.on('mouse:down', this.onMouseDown)
this.canvas.on('mouse:move', this.onMouseMove)
this.canvas.on('mouse:up', this.onMouseUp)
},
methods: {
// 监听鼠标按下事件
onMouseDown(opt) {
this.lastPosX = opt.e.clientX
this.lastPosY = opt.e.clientY
this.isDragging = true
},
// 监听鼠标移动事件
onMouseMove(opt) {
if (this.isDragging) {
this.canvas.viewportTransform[4] += opt.e.clientX - this.lastPosX
this.canvas.viewportTransform[5] += opt.e.clientY - this.lastPosY
this.canvas.requestRenderAll()
this.lastPosX = opt.e.clientX
this.lastPosY = opt.e.clientY
}
},
// 监听鼠标松开事件
onMouseUp(opt) {
if (this.isDragging) {
this.canvas.setViewportTransform(this.canvas.viewportTransform)
this.isDragging = false
}
}
}
}
</script>
以画布中心点为基准手动缩放:
<template>
<el-tooltip content="放大" placement="bottom-start">
<span class="iconfont icon-fangda" @click="onManualScale(-100)"></span>
</el-tooltip>
<el-tooltip content="缩小" placement="bottom-start">
<span class="iconfont icon-suoxiao" @click="onManualScale(100)"></span>
</el-tooltip>
</template>
<script>
export default {
// 中心点缩放画布
onManualScale(delta) {
let zoom = canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
zoom = zoom > 10 ? 10 : (zoom < 0.1 ? 0.1 : zoom) // 最大放大10倍,最小缩小至10%
canvas.zoomToPoint({ // 以画布中心点为基准缩放
x: this.canvasBoxWidth / 2, // canvasBoxWidth 画布宽度
y: this.canvasBoxHeight / 2 // canvasBoxHeight 画布高度
}, zoom)
}
}
</script>
以鼠标指针位置为基准缩放:
this.canvas.on('mouse:wheel', this.onMouseWheel)
// 监听鼠标放大缩小事件
onMouseWheel(opt) {
let delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100
let zoom = this.canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
zoom = zoom > 10 ? 10 : (zoom < 0.1 ? 0.1 : zoom) // 最大放大10倍,最小缩小至10%
this.canvas.zoomToPoint({ // 以鼠标指针位置为基准缩放
x: opt.e.offsetX,
y: opt.e.offsetY
}, zoom)
opt.e.preventDefault()
opt.e.stopPropagation()
}
2.事件解绑
canvas.off('mouse: wheel')
总结
本篇文章主要介绍了Fabric画布的一些操作,可以对画布设置,可以对一些操作做限制,以满足不同的场景需求,后续还会继续撰写其它的
更多推荐
所有评论(0)