fabric.js 知識點記錄

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
                  })
                }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容