优化不同分辨率下canvas绘图功能

src/api/camera/camera-preview.ts

@@ -286,7 +286,7 @@ export const getCameraParamsApi = (cameraId: number) => {
     startTime: '',
     endTime: '',
     imageResolution: 1,
-    recordPeriod: 20,
+    recordPeriod: 10,
     /** 这个要调整一下 */
     reservation: '10',
   };

src/views/cameras/preview/components/CameraLiveVideo/CameraLiveVideo.vue

@@ -1,19 +1,8 @@
 <template>
-  <img
-    :src="bg"
-    alt=""
-    class="videoLive"
-    :style="{
-      width: `${cameraDetailStore.videoSize.width}px`,
-      height: `${cameraDetailStore.videoSize.height}px`,
-    }"
-  />
+  <img :src="bg" alt="" class="videoLive" />
 </template>
 <script lang="ts" setup>
   import bg from '@/assets/images/camera/video-live.png';
-
-  import useCameraDetailStore from '../../store/useCameraDetailStore';
-  const cameraDetailStore = useCameraDetailStore();
 </script>
 <style scoped>
   .videoLive {

src/views/cameras/preview/components/CameraViewSetting/CameraViewSetting.vue

@@ -11,36 +11,32 @@
       />
       <PresetSelect />
     </div>
-
-    <div
-      class="cameraViewSettingWrapper"
-      :style="{
-        width: `${cameraDetailStore.videoSize.width}px`,
-        height: `${cameraDetailStore.videoSize.height}px`,
-      }"
-    >
-      <FenceEditor
-        ref="fenceEditorRef"
-        :width="cameraDetailStore.videoSize.width"
-        :height="cameraDetailStore.videoSize.height" />
-      <div class="cameraVideo">
-        <CameraLiveVideo />
+    <div class="cameraViewOverflow" :style="{ width: domWidth + 'px', height: domHeight + 'px' }">
+      <div
+        class="cameraViewSettingWrapper"
+        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', scale: scale }"
+      >
+        <FenceEditor ref="fenceEditorRef" />
+        <div class="cameraVideo">
+          <CameraLiveVideo />
+        </div>
+        <div class="presetAddWrapper" :class="{ hidePresetControlCls: isEdit }">
+          <CameraDirectionControl />
+          <ElButton
+            type="primary"
+            @click="handleAddPreset"
+            size="small"
+            style="margin-top: 20px; width: 100px"
+            >添加预置位</ElButton
+          >
+          <AddPresetModal
+            v-if="addPresetModalVisible"
+            @close="handleClose"
+            @ok="handleAddPresetOk"
+          />
+        </div>
       </div>
-      <div class="presetAddWrapper" :class="{ hidePresetControlCls: isEdit }">
-        <CameraDirectionControl />
-        <ElButton
-          type="primary"
-          @click="handleAddPreset"
-          size="small"
-          style="margin-top: 20px; width: 100px"
-          >添加预置位</ElButton
-        >
-        <AddPresetModal
-          v-if="addPresetModalVisible"
-          @close="handleClose"
-          @ok="handleAddPresetOk"
-        /> </div
-    ></div>
+    </div>
   </div>
   <div class="cameraParamsSettingWrapper">
     <div class="cameraParamsSetting">
@@ -67,6 +63,7 @@
   import CameraParams from '../CameraParams/CameraParams.vue';
   import { ElMessage } from 'element-plus';
   import CameraDirectionControl from '../CameraDirectionControl/CameraDirectionControl.vue';
+  import { canvasHeight, canvasWidth, domHeight, domWidth, scale } from './constants';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
@@ -141,9 +138,6 @@
   };
 
   const drawable = computed(() => {
-    if (!presetStore.currentPresetToken) return false;
-    if (!cameraAlgoStore.selectedAlgoId) return false;
-    if (!cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool) return false;
     return true;
   });
 
@@ -153,7 +147,7 @@
       cameraAlgoStore.selectedAlgoId &&
       cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool
     ) {
-      const points = fenceStore.serverFencePoints;
+      const points = fenceStore.serverFencePoints || [];
       if (!points) {
         fenceEditorRef.value?.clear();
         return;
@@ -187,19 +181,15 @@
       presetStore.getPresetList(cameraId);
     }
   });
-
-  // watchEffect(() => {
-  //   const scale = cameraDetailStore.params.imageResolution;
-  //   console.log('scale change', scale);
-  //   fenceEditorRef.value?.setScale(scale);
-  // });
 </script>
 <style scoped>
   .cameraViewSettingWrapper {
     position: relative;
-    /* width: 720px;
-    height: 405px; */
     border: 1px solid #ccc;
+    transform-origin: left top;
+  }
+  .cameraViewOverflow {
+    overflow: hidden;
   }
 
   .cameraVideo {

src/views/cameras/preview/components/CameraViewSetting/constants.ts

@@ -0,0 +1,10 @@
+/** canvas的实际宽度 */
+export const canvasWidth = 1920;
+export const canvasHeight = 1080;
+/** 视频的比例 */
+const videoRatio = canvasHeight / canvasWidth;
+
+/** dom展示出来的宽度，由于屏幕大小限制，完全按照1920来展示，一屏显示不下，所以要进行一定的缩放 */
+export const domWidth = 1344;
+export const domHeight = domWidth * videoRatio;
+export const scale = domWidth / canvasWidth;

src/views/cameras/preview/components/FenceEditor/FenceEditor.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
   import Konva from 'konva';
-  import { ref, onMounted, onUnmounted, watch } from 'vue';
+  import { ref, onMounted, onUnmounted } from 'vue';
   import { GROUP_NAME, POLYGON_NAME, Points, ToolObjectItem, toolObject } from './constants';
   import { ElMessage } from 'element-plus';
   import { getDefaultScale } from './utils';
@@ -37,22 +37,13 @@
     stage?.destroy();
   });
 
-  const props = defineProps<{ width: number; height: number }>();
-
-  watch(
-    () => [props.width, props.height],
-    () => {
-      initKonvaStage();
-    },
-  );
-
   /**
    *初始化konva舞台
    */
   function initKonvaStage() {
     //1实例化stage层
-    stageWidth = props.width || 0;
-    stageHeight = props.height || 0;
+    stageWidth = mapRef.value?.clientWidth || 0;
+    stageHeight = mapRef.value?.clientHeight || 0;
     console.log('stageWidth', stageWidth);
     stage = new Konva.Stage({
       container: 'editorMap',
@@ -176,6 +167,7 @@
     if (polygonPoints.length < 2) {
       //最好使用konva提供的鼠标xy点坐标
       var mousePos = stage?.getPointerPosition();
+      console.log('mousePos', mousePos);
       if (!mousePos) return;
       //考虑鼠标缩放
       var x = (mousePos.x / scale - layer?.getAttr('x')) / getDefaultScale(layer?.scaleX()),
@@ -653,10 +645,10 @@
 
       const line = (item as Konva.Group).findOne((x: any) => x.className === 'Line') as Konva.Line;
       const points = line?.points();
-      const newPoints = [];
+      const newPoints: number[][] = [];
       /** 存到后端的时候，只给点的坐标信息，不会给group的位置信息，所以要将点的坐标加上group的位移，才是之后点的最终坐标 */
       for (let i = 0; i < points.length; i += 2) {
-        newPoints.push([points[i] + groupX, points[i + 1] + groupY]);
+        newPoints.push([Math.floor(points[i] + groupX), Math.floor(points[i + 1] + groupY)]);
       }
       return newPoints;
     });