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的自适应(内容自动缩放并居中)
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
                  })
                }

你可能感兴趣的:(fabric.js 知识点记录)