记录fabricJS的坑，多边形填充图案，移动端兼容

2022/3/27 校正方法

使用如下的方法出来的遮挡物会变得很糊，因为内部的填充dom被压缩了，现在优化了解决方法[直接使用img填充]:

			// 多边形点列表
            let points = []		
            // 设备宽度
            let width = document.documentElement.clientWidth
            // 设备高度
            let height = document.documentElement.clientHeight
            // 背景图片地址
            let url = './images/bg2.jpeg'
            // 实例化多边形
            let polygon = new fabric.Polygon(points);

            fabric.util.loadImage(url, function (img) {
                // 计算缩放比例
                let w = height / img.height,h = width / img.width;
                let scale = w > h ? h : w
                // 将画布canvas添加到pattern中
                const pattern = new fabric.Pattern({
                    source: img,
                    patternTransform: [scale, 0, 0, scale, -polygon.left, -polygon.top],
                    repeat: 'no-repeat'
                })
                // 设置多边形为图案填充
                polygon.set('fill', pattern);
                canvas.add(polygon)
            });

---

应用场景：抠图，点选出多边形，填充图案为背景图片，偏移遮盖住当前位置，形成视觉效果上的选区遮挡住了其他图形

当前模拟设备：ipone12pro

解决思路：通过fabricJS选择圆点，根据圆点列表生成多边形，向多边形中填充图片，再将图片根据多边形距离视口左侧上侧距离计算图片在多边形中的偏移形成改效果

遇到的问题：在长屏手机上横屏时，图片的缩放比例跟计算比例有误差—图片缩放的bug为fabric的bug

代码：

			// 多边形点列表
            let points = []		
            // 设备宽度
            let width = document.documentElement.clientWidth
            // 设备高度
            let height = document.documentElement.clientHeight
            // 背景图片地址
            let url = './images/bg2.jpeg'
            // 实例化多边形
            let polygon = new fabric.Polygon(points);

            fabric.util.loadImage(url, function (img) {
                // 实例化图片，并根据缩放比例 偏移图片位置
                let images = new fabric.Image(img, {
                    left: width / 2 - (polygon.left - polygon.width / 2),
                    top: height / 2 - (polygon.top - polygon.height / 2)
                });
                // 图片填充屏幕宽度自适应缩放
                images.scale(width / img.width)
                // 生成静态画布
                let patternSourceCanvas = new fabric.StaticCanvas();
                /* 这里是重点 */ 
                patternSourceCanvas.lowerCanvasEl.width = width
                patternSourceCanvas.lowerCanvasEl.height = height
                // 将图片添加到画布中
                patternSourceCanvas.add(images);
                // 将画布canvas添加到pattern中
                const pattern = new fabric.Pattern({
                    source: patternSourceCanvas.getElement(),
                    repeat: 'no-repeat'
                })
                // 设置多边形为图案填充
                polygon.set('fill', pattern);
                canvas.add(polygon)
            });

重点代码

patternSourceCanvas.lowerCanvasEl.width = width
patternSourceCanvas.lowerCanvasEl.height = height

当执行let patternSourceCanvas = new fabric.StaticCanvas();时，生成了一个canvas元素，但是这个元素的宽高并不能直接设定，内部的canvas打印结果如下：

在844x390的屏幕下，该画布的width与heigth自动设置为了900、450，而pattern根据这个画布去填充图案的宽高正是根据width与height属性，而不是他style里面的width与height，所以会造成图片在这里会被拉伸很大，我们手动去设置他的宽高为屏幕宽高再去缩放图片为屏幕宽高的等比例缩放即可

官方文档中提供设置StaticCanvas的宽高方法是设置内部canvas的style中的width与height，所以我们只能直接从StaticCanvas实例中找到那个canvas直接更改其width与height