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' }