本文简介
我列举了 3 种在 Fabric.js
中 更换图片 的办法。
其中还包含 更换组内图片 的操作。
环境和版本
Chrome 浏览器版本:96.0.4664.45
Fabric.js 版本:4.6.0
我是在原生环境下开发的,同时也提供了一份 Vue3
环境下开发的代码(文末有链接)。
入手操作
接下来有 3 个案例,应用了 2 张图片 Agumon.png
和 Bhikkhu.png
,图片是在 iconfont 网站上找到的。
如果须要应用本案例的图片,能够在文末提供的仓库中获取。
情景 1:更换图片元素的 src
如果在画布上增加的是 Image
对象,那么能够应用 Image.setSrc
设置新的图片,而后再应用 Canvas.renderAll
刷新一下画布即可。
<style>
canvas {border: 1px solid #ccc;}
</style>
<button onclick="change()"> 批改图片 </button>
<canvas width="300" height="300" id="canvas"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
// 实例化 canvas
canvas = new fabric.Canvas('canvas')
// 创立图片对象
fabric.Image.fromURL('../../images/Agumon.png', oImg => {
// 将图片对象增加到 canvas 中
canvas.add(oImg)
})
// 更换图片事件
function change() {// 获取图片对象。因为在本例中,画布里只有一个元素,用 getObjects() 获取到的数组第一个元素就是图片咯
const img = canvas.getObjects()[0]
// 应用 setSrc 办法更改图片,第二个参数是回调函数,在回调函数里刷新一下 canvas 即可
img.setSrc('../../images/Bhikkhu.png', () => {canvas.renderAll()
})
}
</script>
下面这种情景是最简略的。
如果画布上有多个图形和图片,你可能须要在创立图片的时候加一些自定义属性进去判断。
应用 fabric.getObjects().find()
去搜寻就行了。
find()
就是数组的原始办法。
情景 2:批改组内的图片(无缓存)
创立组默认是有缓存的,有缓存的话应用 Canvas.renderAll()
办法从新渲染也不会更新图片。
所以在创立组的时候要申明 不缓存:Group.objectCaching
。
<style>
canvas {border: 1px solid #ccc;}
</style>
<button onclick="change()"> 批改图片 </button>
<canvas width="300" height="300" id="canvas"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
// 实例化 canvas
canvas = new fabric.Canvas('canvas')
// 创立图片对象
fabric.Image.fromURL('../../images/Agumon.png', oImg => {
// 文本
const text = new fabric.Text('没缓存的组', {
fontSize: 14,
top: 50
})
// 创立组
const group = new fabric.Group([oImg, text], {objectCaching: false // 不缓存!!!})
// 将分组增加到 canvas 里
canvas.add(group)
})
// 更换图片事件
function change() {
// 获取组
const group = canvas.getObjects()[0]
// 获取图片
const img = group.getObjects().find(item => {
// 通过 isType 判断图片元素,因为组内有 2 个元素(一个图片,一个文本)return item.isType('image')
})
// 找到图片,而后更换
img.setSrc('../../images/Bhikkhu.png', () => {
// 更换完图片,刷新一下 canvas
canvas.renderAll()})
}
</script>
这种情景,重点在创立组时,要申明 objectCaching: false
。
情景 3:批改组内的图片(有缓存)
如果 组 (Group) 设置了缓存,又须要更换 组(Group) 内的图片。
我的做法是:
- 查找图片对象,并保留到一个变量上;
- 删除分组内的图片对象(应用
Group.removeWithUpdate
); - 更新图片对象的
src
指向(应用Image.setSrc
); - 将图片放到分组里(应用
Group.addWithUpdate
); - 从新渲染画布(应用
Canvas.renderAll
);
<style>
canvas {border: 1px solid #ccc;}
</style>
<button onclick="change()"> 批改图片 </button>
<canvas width="300" height="300" id="canvas"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
// 实例化 canvas
canvas = new fabric.Canvas('canvas')
// 创立图片对象
fabric.Image.fromURL('../../images/Agumon.png', oImg => {
// 文本
const text = new fabric.Text('没缓存的组', {
fontSize: 14,
top: 50
})
// 创立组
const group = new fabric.Group([oImg, text])
// 将分组增加到 canvas 里
canvas.add(group)
})
// 更换图片事件
function change() {
// 获取组
const group = canvas.getObjects()[0]
//【1】查找图片对象,并保留到一个变量上
const img = group.getObjects().find(item => {
// 通过 isType 判断图片元素,因为组内有 2 个元素(一个图片,一个文本)return item.isType('image')
})
//【2】删除分组内的图片对象
group.removeWithUpdate(img)
//【3】更新图片对象的 `src` 指向
img.setSrc('../../images/Bhikkhu.png', () => {
//【4】将图片放到分组里
group.addWithUpdate(img)
//【5】从新渲染画布
canvas.renderAll()})
}
</script>
按这个例子的形式是能够达到目标的,但总感觉不太难受。
如果你有更好的思路能够分享一下,一起探讨学习。
如果你的我的项目中也须要更改图片,但又不在以上 3 种情景中,能够留言,我会尝试解决。
代码仓库
原生形式实现 更改图片
在 Vue3 中应用 Fabric 实现 更改图片
更多举荐
《Fabric.js 从入门到精通》
《Fabric.js 实现突变 (Gradient) 成果,包含径向突变 radial》
《Fabric.js 自定义右键菜单》
本文由博客一文多发平台 OpenWrite 公布!