chrisbing / electorn-capture-screen

electron capture screen
MIT License
225 stars 65 forks source link

当屏幕scaleFactor等于1.25的时候,拖动选区出现放大,抖动问题 #29

Closed xieerduos closed 3 years ago

xieerduos commented 3 years ago

平台:window 10 复现步骤:

1. 设置  -- 显示 -- 缩放与布局 --值选择为125%
2. Ctrl + Shift + A 截图
3. 鼠标划选区,看效果

image

期望: 与 缩放与布局 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:

1. Setting - Display - Scaling and Layout - Value selection is 125%
2. Ctrl + Shift + A to take a screenshot
3. Use the mouse to draw a selection area to see the effect

image

Expectation: Consistent with 100% effect of zooming and layout

xieerduos commented 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); // 左