From f6a132339a4db990c090e31a382a4ac93a6d506f Mon Sep 17 00:00:00 2001 From: ferret <1219460281@qq.com> Date: Tue, 2 Apr 2024 15:22:37 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E7=95=A5=E5=BE=AE=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BA=86=E7=A7=BB=E5=8A=A8=E5=92=8C=E4=BF=AE=E6=94=B9=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=E6=97=B6=E5=80=99=E7=9A=84=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 渲染移动组件时位置由left、top修改为translate --- .../chart/ContentEdit/hooks/useStyle.hook.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts index 14507f73..c1daeb18 100644 --- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts @@ -3,17 +3,20 @@ import { PickCreateComponentType } from '@/packages/index.d' type AttrType = PickCreateComponentType<'attr'> export const useComponentStyle = (attr: AttrType, index: number) => { - if(!attr) return {} + if (!attr) return {} const componentStyle = { zIndex: index + 1, - left: `${attr.x}px`, - top: `${attr.y}px` + // left: `${attr.x}px`, + // top: `${attr.y}px`, + left: 0, + top: 0, + transform: `translate(${attr.x}px, ${attr.y}px)` // 替换成transform 优化渲染性能 } return componentStyle } export const useSizeStyle = (attr: AttrType, scale?: number) => { - if(!attr) return {} + if (!attr) return {} return { width: `${scale ? scale * attr.w : attr.w}px`, height: `${scale ? scale * attr.h : attr.h}px` @@ -56,8 +59,11 @@ export const usePointStyle = ( } const style = { - left: `${newLeft}px`, - top: `${newTop}px`, + // left: `${newLeft}px`, + // top: `${newTop}px`, + left: 0, + top: 0, + transform: `translate(${newLeft - 3}px, ${newTop - 3}px)`, // 替换成transform 优化渲染性能 cursor: cursorResize[index] + '-resize' }