leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

【Bug/建议】设置编辑器的point使用shadow属性后,框选元素时,“框选框”感到卡顿不跟手(阻尼感)

Open Xdy1579883916 opened this issue 10 months ago • 1 comments

录制的gif为了能体现效果,设置了0.5倍速 Image

代码如下:


// #图形编辑器 [显示旋转控制点]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)
const basePoint: any = {
  cornerRadius: 4,
  fill: '#fff',
  stroke: {
    type: 'solid',
    color: '#AAABAC',
  },
  strokeWidth: 0.5,
  shadow: {
    x: 0,
    y: 0,
    blur: 10,
    color: 'rgba(170,170,170,0.2)',
  },
}
const app = new App({  
    view: window,
    editor: { 
        lockRatio: 'corner',
        hideOnMove: true,
        stroke: '#4D7CFF',
        point: {
          width: 10,
          height: 10,
          ...basePoint,
        },
        middlePoint: {
          width: 16,
          height: 8,
          ...basePoint,
        },
        rotateGap: 45,
        skewable: false,
     }
})

const rect1 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
const rect2 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 200, 200)
const rect3 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 300, 400)
const rect4 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 200, 100)
const rect5 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 300, 200)
const rect6 = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 400, 400)
app.tree.addMany(
    rect1, 
    rect2,
     rect3,
     rect4,
     rect5,
     rect6,
)

app.editor.target = rect1

经过测试,注释 shadow 设置,就好了

Xdy1579883916 avatar Mar 06 '25 00:03 Xdy1579883916

shdow的性能会优化,已经有计划了

leaferjs avatar Mar 06 '25 01:03 leaferjs