1、一个比较详细的fabric.js文章地址(操作图层)
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/704333/#outline__4_10
2、限制图层移动的属性
lockMovementX: true, lockMovementY: true
3、Fabric.js - 画布视图viewport的自适应(内容自动缩放并居中)
https://www.hangge.com/blog/cache/detail_1861.html
4、遇到问题总结(含获取画布上所有元素对象)
https://blog.csdn.net/qq_42651390/article/details/107612569?spm=1005.2026.3001.5635&utm_medium=distribute.pc_relevant_ask_down.none-task-blog-2defaultOPENSEARCHdefault-4.pc_feed_download_top3ask&depth_1-utm_source=distribute.pc_relevant_ask_down.none-task-blog-2defaultOPENSEARCHdefault-4.pc_feed_download_top3ask
5、Fabric.js事件合集
http://www.321332211.com/thread?topicId=249
6、Fabric.js详细教程(含保存撤销重做)
https://www.cnblogs.com/rachelch/p/14172947.html
7、Fabric.js (更换图片)
https://blog.csdn.net/qq_37305101/article/details/100113999
8、相册选择图片,画布背景自适应
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
console.log(JSON.stringify(res.tempFilePaths));
let tempFilePaths = res.tempFilePaths[0];
console.log('tempFilePaths', tempFilePaths)
uni.getImageInfo({
src: tempFilePaths,
success(imgres) {
canvas.setBackgroundImage(tempFilePaths, canvas.renderAll.bind(
canvas), {
left: 0,
top: 0,
width: imgres.width,
height: imgres.height,
scaleX: canvas.width / imgres.width,
scaleY: canvas.height / imgres.height,
originX: 'left',
originY: 'top',
crossOrigin: 'anonymous'
});
}
})
}
});
9、删除对象
const vm = this
const el = this.canvas.getActiveObjects()
if (el.length === 1) {
vm.canvas.remove(el[0])
vm.showdelet = false
} else {
vm.canvas.getActiveObjects().forEach((row, index) => {
vm.canvas.remove(row)
vm.canvas.discardActiveObject()
vm.showdelet = false
})
}