Closed xieerduos closed 3 years ago
Resolved: 已解决:
1. 删掉下面的代码,因为计算出现了小数点,并且鼠标移动操作短时间内频繁计算获取设置画布
1. Delete the following code, because the decimal point appears in the calculation, and the mouse movement operation frequently calculates and obtains the setting canvas in a short time
// let imageData = this.bgCtx.getImageData(x * scaleFactor, y * scaleFactor, w * scaleFactor, h * scaleFactor);
// this.ctx.putImageData(imageData, margin * scaleFactor, margin * scaleFactor);
删掉背景图代码,无需展示背景图,直接展示电脑桌面 Delete the code of the background image, and display the desktop directly without displaying the background image
// this.$bg.style.backgroundImage = `url(${this.imageSrc})`;
// this.$bg.style.backgroundSize = `${this.screenWidth}px ${this.screenHeight}px`;
2. 添加下面代码,绘制蒙层 2. Add the following code to draw the mask
const screenWidth = this.screenWidth;
const screenHeight = this.screenHeight;
// 绘制蒙层区域
this.ctxShow.clearRect(0, 0, screenWidth, screenHeight);
// 填充样式,透明度为0.3
this.ctxShow.fillStyle = 'rgba(0, 0, 0, 0.3)';
// 填充区域, 选区的上左下右
this.ctxShow.fillRect(0, 0, screenWidth, y); // 上
const rightWidth = screenWidth - w - x;
this.ctxShow.fillRect(x + w, y, rightWidth < 0 ? 0 : rightWidth, h); // 右
this.ctxShow.fillRect(0, y + h, screenWidth, screenHeight - y - h); // 下
this.ctxShow.fillRect(0, y, x, h); // 左
平台:window 10 复现步骤:
期望: 与 缩放与布局 100% 效果一致
When the screen scaleFactor is equal to 1.25, drag the selection area to zoom in and shake problems
Platform: window 10 Steps to reproduce:
Expectation: Consistent with 100% effect of zooming and layout