修正画布上组件的渲染bug

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -56,40 +56,43 @@
                 zIndex: 10
               }" @mousedown="onElementMouseDown($event, item)">
                 <TextBoard v-if="item.type === 'text'" :text="item.text" :color="item.color" :font-size="item.fontSize"
-                  :font-weight="item.fontWeight" :align="item.align" :width="item.width" :height="item.height"
-                  :selected="selectedComponent === item" @resize="
+                  :font-weight="item.fontWeight" :align="item.align" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :selected="selectedComponent === item" @resize="
                     ({ width, height }) => {
-                      item.width = width;
-                      item.height = height;
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
                 <ScrollingTextBoard v-if="item.type === 'scrollingText'" :text="item.text" :color="item.color"
-                  :font-size="item.fontSize" :font-weight="item.fontWeight" :align="item.align" :width="item.width"
-                  :height="item.height" :speed="item.speed" :selected="selectedComponent === item" @resize="
+                  :font-size="item.fontSize" :font-weight="item.fontWeight" :align="item.align"
+                  :width="item.width * canvasScale" :height="item.height * canvasScale" :speed="item.speed"
+                  :selected="selectedComponent === item" @resize="
                     ({ width, height }) => {
-                      item.width = width;
-                      item.height = height;
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
-                <MediaAssetBoard v-if="item.type === 'mediaAsset'" :width="item.width" :height="item.height"
-                  :media-id="item.mediaId" :selected="selectedComponent === item" @resize="
+                <MediaAssetBoard v-if="item.type === 'mediaAsset'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :media-id="item.mediaId" :selected="selectedComponent === item"
+                  @resize="
                     ({ width, height }) => {
-                      item.width = width;
-                      item.height = height;
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
-                <LiveBoard v-if="item.type === 'live'" :width="item.width" :height="item.height"
-                  :live-url="item.liveUrl" :play-audio="item.playAudio" :selected="selectedComponent === item" @resize="
+                <LiveBoard v-if="item.type === 'live'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :live-url="item.liveUrl" :play-audio="item.playAudio"
+                  :selected="selectedComponent === item" @resize="
                     ({ width, height }) => {
-                      item.width = width;
-                      item.height = height;
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
-                <WebPageBoard v-if="item.type === 'webPage'" :width="item.width" :height="item.height" :url="item.url"
-                  :selected="selectedComponent === item" @resize="
+                <WebPageBoard v-if="item.type === 'webPage'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :url="item.url" :selected="selectedComponent === item" @resize="
                     ({ width, height }) => {
-                      item.width = width;
-                      item.height = height;
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
                     }
                   " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
                 <!-- 未来可扩展更多类型 -->
@@ -132,7 +135,6 @@
               </template>
             </el-form-item>
           </template>
-
           <!-- 对齐尺寸操作区 -->
           <div style="margin: 12px 0">
             <div style="font-weight: bold; margin-bottom: 10px">对齐尺寸</div>