Star 元素
绘制车标、星光、五角星、多角星形。
继承
Star > UI
关键属性
width: number
星形的宽度。
height: number
星形的高度。
corners: number
星形的角数,取值范围为 >=3。
内部逻辑:在内外圆上每 (360 / corners) 度取一个点,再将点连成线,组成一个多角星形。
innerRadius: number
内半径比例,默认 0.382,取值范围为 0.0 ~ 1.0。
ts
// 五角星
corners: 5
innerRadius: 0.382
圆角属性
cornerRadius: number
圆角大小,使图形拐角处变的圆滑。
示例
绘制车标
ts
ts
// #创建 Star [绘制车标(App)]
import { App, Star } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const star = new Star({
width: 100,
height: 100,
corners: 3,
innerRadius: 0.15,
fill: '#32cd79',
editable: true
})
app.tree.add(star)
绘制星光
ts
ts
// #创建 Star [绘制星光(App)]
import { App, Star } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const star = new Star({
width: 100,
height: 100,
corners: 4,
innerRadius: 0.1,
fill: '#32cd79',
editable: true
})
app.tree.add(star)
绘制五角星
ts
ts
// #创建 Star [绘制五角星(App)]
import { App, Star } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const star = new Star({
width: 100,
height: 100,
corners: 5,
fill: '#32cd79',
editable: true
})
app.tree.add(star)
绘制圆角星形
ts
ts
// #创建 Star [绘制圆角星形(App)]
import { App, Star } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({ view: window, editor: {} })
const star = new Star({
width: 100,
height: 100,
innerRadius: 0.5,
corners: 8,
cornerRadius: 5,
fill: '#32cd79',
editable: true
})
app.tree.add(star)