Просмотр исходного кода

fix: 修改图片控件中心及缩放样式设置

jiaxing.liao недель назад: 2
Родитель
Сommit
26a015b6ef

+ 9 - 3
src/renderer/src/lvgl-widgets/image/Image.vue

@@ -47,12 +47,18 @@ const styleMap = useWidgetStyle({
 })
 
 const imageProps = computed(() => {
-  const { openScale, scale = 256, width, height } = props
+  const { openScale, scale = 256, width, height, rotate } = props
   const s = openScale ? scale / 256 : 1
+  const { x = width / 2, y = height / 2 } = rotate
 
   return {
-    width: `${width * s}px`,
-    height: `${height * s}px`
+    width: `${width}px`,
+    height: `${height}px`,
+    style: {
+      // 设置缩放中心
+      transformOrigin: `${x}px ${y}px`,
+      transform: `scale(${s})`
+    }
   }
 })
 

+ 12 - 11
src/renderer/src/lvgl-widgets/image/index.ts

@@ -196,7 +196,7 @@ export default {
         }
       },
       {
-        label: '旋转中心',
+        label: '中心',
         valueType: 'group',
         children: [
           {
@@ -214,22 +214,23 @@ export default {
             componentProps: {
               span: 12
             }
-          },
-          {
-            label: '旋转角度',
-            field: 'props.rotate.angle',
-            valueType: 'number',
-            componentProps: {
-              span: 12,
-              min: -360,
-              max: 360
-            }
           }
         ]
       },
+      {
+        label: '旋转角度',
+        field: 'props.rotate.angle',
+        labelWidth: '60px',
+        valueType: 'number',
+        componentProps: {
+          min: -360,
+          max: 360
+        }
+      },
       {
         label: '缩放',
         field: 'props.openScale',
+        labelWidth: '60px',
         valueType: 'switch'
       },
       {

+ 2 - 2
src/renderer/src/views/designer/config/property/components/StyleSpace.vue

@@ -6,7 +6,7 @@
           v-model="lineHeight"
           controls-position="right"
           style="width: 100%"
-          :min="0"
+          :min="-100"
           :max="100"
         >
           <template #prefix>
@@ -21,7 +21,7 @@
           v-model="letterSpacing"
           controls-position="right"
           style="width: 100%"
-          :min="0"
+          :min="-100"
           :max="100"
         >
           <template #prefix>