Star 元素

绘制车标、星光、五角星、多角星形。

继承

Star  >  UI

关键属性

width: number

星形的宽度。

height: number

星形的高度。

corners: number

星形的角数，取值范围为 >=3。

内部逻辑：在内外圆上每 (360 / corners) 度取一个点，再将点连成线，组成一个多角星形。

innerRadius: number

内半径比例，默认 0.382，取值范围为 0.0 ～ 1.0。

// 五角星 corners: 5 innerRadius: 0.382

圆角属性

cornerRadius: number

圆角大小，使图形拐角处变的圆滑。

示例

绘制车标

Leafer

// #创建 Star [绘制车标 (Leafer)] import { Leafer, Star } from 'leafer-ui'  const leafer = new Leafer({ view: window })  const star = new Star({  width: 100,  height: 100,  corners: 3,  innerRadius: 0.15,  fill: '#32cd79' })  leafer.add(star)

App

// #创建 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)

绘制星光

Leafer

// #创建 Star [绘制星光 (Leafer)] import { Leafer, Star } from 'leafer-ui'  const leafer = new Leafer({ view: window })  const star = new Star({  width: 100,  height: 100,  corners: 4,  innerRadius: 0.1,  fill: '#32cd79' })  leafer.add(star)

App

// #创建 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)

绘制五角星

Leafer

// #创建 Star [绘制五角星 (Leafer)] import { Leafer, Star } from 'leafer-ui'  const leafer = new Leafer({ view: window })  const star = new Star({  width: 100,  height: 100,  corners: 5,  fill: '#32cd79' })  leafer.add(star)

App

// #创建 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)

绘制圆角星形

Leafer

// #创建 Star [绘制圆角星形 (Leafer)] import { Leafer, Star } from 'leafer-ui'  const leafer = new Leafer({ view: window })  const star = new Star({  width: 100,  height: 100,  innerRadius: 0.5,  corners: 8,  cornerRadius: 5,  fill: '#32cd79' })  leafer.add(star)

App

// #创建 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)