Rect 元素
绘制矩形、圆角矩形。
继承
Rect > UI
关键属性
width: number
宽度。
height: number
高度。
圆角属性
cornerRadius: number
| number
[]
圆角大小,可以分别设置 4 个圆角。
ts
cornerRadius: [20, 10, 20, 10] // [topLeft, topRight, bottomRight, bottomLeft]
cornerRadius: [20, 10, 20] // [topLeft, (topRight-bottomLeft), bottomRight]
cornerRadius: [20, 10] // [ (topLeft-bottomRight), (topRight-bottomLeft)]
cornerRadius: 20 // all
示例
绘制矩形
ts
ts
绘制圆角矩形
ts
ts
// #创建 Rect [绘制圆角矩形(App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const rect = new Rect({
width: 100,
height: 100,
fill: '#32cd79',
cornerRadius: 20,
editable: true
})
app.tree.add(rect)
绘制不同圆角的矩形
ts
ts
// #创建 Rect [绘制不同圆角的矩形(App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const rect = new Rect({
width: 100,
height: 100,
fill: '#32cd79',
cornerRadius: [0, 40, 20, 40],
editable: true
})
app.tree.add(rect)