leafer-ui
leafer-ui copied to clipboard
【Bug/建议】设置编辑器的point使用shadow属性后,框选元素时,“框选框”感到卡顿不跟手(阻尼感)
录制的gif为了能体现效果,设置了0.5倍速
代码如下:
// #图形编辑器 [显示旋转控制点]
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 设置,就好了
shdow的性能会优化,已经有计划了