From 8bc53923d16a4b7eef2983199fa93f479cdd01ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=9C=E6=96=B9=E6=98=9F=E7=97=95?= <lxy5266@live.com>
Date: Mon, 26 Oct 2020 19:31:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=88=86=E8=BE=A8?=
 =?UTF-8?q?=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 previewer/src/views/Home.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/previewer/src/views/Home.vue b/previewer/src/views/Home.vue
index e324772..710f911 100644
--- a/previewer/src/views/Home.vue
+++ b/previewer/src/views/Home.vue
@@ -4,8 +4,8 @@
       <div class="page canvas-container">
         <canvas
           id="screen"
-          width="454"
-          height="454"
+          :width="screenInfo.width"
+          :height="screenInfo.height"
           @mousemove="move"
           @mousedown="mouseDown"
           @mouseup="mouseUp"
@@ -59,6 +59,10 @@ export default {
       isMouseDown: false,
       icons: { // icons
         mdiMenu
+      },
+      screenInfo: {
+        width: 454,
+        height: 454
       }
     }
   },
@@ -121,6 +125,8 @@ export default {
       console.log('receive:', evt)
       const msg = JSON.parse(evt.data)
       switch (msg.command) {
+        case 'screeninfo':
+          this.setScreenInfo(msg.args)
         default:
           console.log('unknow:', msg)
       }
@@ -158,13 +164,14 @@ export default {
       this.screen = node.getContext('2d')
     },
     updateScreen: function (image) {
+      const { width, height } = this.screenInfo
       const reader = new FileReader()
       reader.onload = (evt) => {
         if (evt.target.readyState === FileReader.DONE) {
           const data = evt.target.result
           const dv = new DataView(data)
-          this.screen.clearRect(0, 0, 454, 454)
-          let imgData = this.screen.createImageData(454, 454)
+          this.screen.clearRect(0, 0, width, height)
+          let imgData = this.screen.createImageData(width, height)
           for (let i = 0; i < evt.total; i += 4) {
             imgData.data[i] = dv.getUint8(i + 1) // r
             imgData.data[i + 1] = dv.getUint8(i + 2) // g
@@ -175,6 +182,13 @@ export default {
         }
       }
       reader.readAsArrayBuffer(image)
+    },
+    setScreenInfo: function (data) {
+      const { width, height } = data
+      this.screenInfo = {
+        width,
+        height
+      }
     }
   },
   created () {
@@ -212,8 +226,6 @@ export default {
       align-items: center;
     }
     .screen {
-      width: 100%;
-      height: 100%;
     }
     .geo {
       padding-left: 0;
@@ -227,7 +239,5 @@ export default {
       right: 20px;
       z-index: 100;
     }
-    #screen {
-    }
   }
 </style>
-- 
Gitee