blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-13 22:12:11 +08:00
Code Issues Projects Releases Wiki Activity

perf: 略微优化了移动和修改大小时候的性能

Browse Source 
渲染移动组件时位置由left、top修改为translate
This commit is contained in:
ferret 2024-04-02 15:22:37 +08:00
parent 04bc68c3ce
commit f6a132339a
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/chart/ContentEdit/hooks/useStyle.hook.ts
View File

@ -3,17 +3,20 @@ import { PickCreateComponentType } from '@/packages/index.d'
type AttrType = PickCreateComponentType<'attr'> type AttrType = PickCreateComponentType<'attr'>
export const useComponentStyle = (attr: AttrType, index: number) => { export const useComponentStyle = (attr: AttrType, index: number) => {
if(!attr) return {} if (!attr) return {}
const componentStyle = { const componentStyle = {
zIndex: index + 1, zIndex: index + 1,
left: `${attr.x}px`, // left: `${attr.x}px`,
top: `${attr.y}px` // top: `${attr.y}px`,
left: 0,
top: 0,
transform: `translate(${attr.x}px, ${attr.y}px)` // 替换成transform 优化渲染性能
} }
return componentStyle return componentStyle
} }
export const useSizeStyle = (attr: AttrType, scale?: number) => { export const useSizeStyle = (attr: AttrType, scale?: number) => {
if(!attr) return {} if (!attr) return {}
return { return {
width: `${scale ? scale * attr.w : attr.w}px`, width: `${scale ? scale * attr.w : attr.w}px`,
height: `${scale ? scale * attr.h : attr.h}px` height: `${scale ? scale * attr.h : attr.h}px`
@ -56,8 +59,11 @@ export const usePointStyle = (
} }
const style = { const style = {
left: `${newLeft}px`, // left: `${newLeft}px`,
top: `${newTop}px`, // top: `${newTop}px`,
left: 0,
top: 0,
transform: `translate(${newLeft - 3}px, ${newTop - 3}px)`, // 替换成transform 优化渲染性能
cursor: cursorResize[index] + '-resize' cursor: cursorResize[index] + '-resize'
} }