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的自適應(yīng)(內(nèi)容自動縮放并居中)
https://www.hangge.com/blog/cache/detail_1861.html
4、遇到問題總結(jié)(含獲取畫布上所有元素對象)
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、相冊選擇圖片,畫布背景自適應(yīng)
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
})
}