update

src/views/Editor/Canvas/AlignmentLine.vue

@@ -1,23 +1,16 @@
 <template>
-  <div 
+  <div class="alignment-line" :style="{ left, top }">
-    class="alignment-line"
+    <div :class="['line', type]" :style="sizeStyle"></div>
-    :style="{
-      left: axis.x + 'px',
-      top: axis.y + 'px',
-    }"
-  >
-    <div 
-      :class="['line', type]" 
-      :style="type === 'vertical' ? { height: length + 'px' } : { width: length + 'px' }"
-    ></div>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { computed, PropType, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+import { State } from '@/store'
 import { AlignmentLineAxis } from '@/types/edit'
 
-export default {
+export default defineComponent({
   name: 'alignment-line',
   props: {
     type: {
@@ -32,8 +25,34 @@ export default {
       type: Number,
       required: true,
     },
+    offsetX: {
+      type: Number,
+      required: true,
+    },
+    offsetY: {
+      type: Number,
+      required: true,
+    },
   },
-}
+  setup(props) {
+    const store = useStore<State>()
+    const canvasScale = computed(() => store.state.canvasScale)
+
+    const left = computed(() => props.axis.x * canvasScale.value + props.offsetX + 'px')
+    const top = computed(() => props.axis.y * canvasScale.value + props.offsetY + 'px')
+
+    const sizeStyle = computed(() => {
+      if(props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
+      return { width: props.length * canvasScale.value + 'px' }
+    })
+
+    return {
+      left,
+      top,
+      sizeStyle,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/index.vue

@@ -7,6 +7,15 @@
     v-contextmenu="contextmenus"
     v-click-outside="removeEditorAreaFocus"
   >
+    <AlignmentLine 
+      v-for="(line, index) in alignmentLines" 
+      :key="index" 
+      :type="line.type" 
+      :axis="line.axis" 
+      :length="line.length"
+      :offsetX="viewportStyles.left"
+      :offsetY="viewportStyles.top"
+    />
     <div 
       class="viewport" 
       ref="viewportRef"
@@ -27,11 +36,6 @@
         :quadrant="mouseSelectionState.quadrant"
       />
 
-      <AlignmentLine 
-        v-for="(line, index) in alignmentLines" :key="index" 
-        :type="line.type" :axis="line.axis" :length="line.length"
-      />
-
       <MultiSelectOperate 
         v-if="activeElementIdList.length > 1"
         :elementList="elementList"