Skip to content

around

围绕中心点绘制、旋转、缩放元素,类似 CSS 中的 transform-origin(不过绘制也是围绕这个点)。

图中将元素实际内容的中心点 around , 对准元素的 x,y 坐标放置。

围绕中心点绘制

关键属性

around: IAround

设置 'center' 表示正中心 {x:0.5, y: 0.5}, 设置 {x:1, y:1} 表示右下角,相对元素实际内容的宽高,基础元素及 Group 均已支持。

方向图

ts
type IAround =
  | 'center'
  | 'topLeft'
  | 'top'
  | 'topRight'
  | 'right'
  | 'bottomRight'
  | 'bottom'
  | 'bottomLeft'
  | 'left'
  | IPointData

归属

UI

示例

绿色矩形 围绕坐标(50,50) 为中心进行绘制

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 0, y: 0, width: 100, height: 100, fill: '#FF4A2C' })

const around = new Rect({ 
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    around: 'center',
    draggable: true,
    fill: '#4DCB71'
})

leafer.add(rect)
leafer.add(around)

旋转 45 度

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 0, y: 0, width: 100, height: 100, fill: '#FF4A2C' })

const around = new Rect({ 
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    around: 'center',
    rotation: 45,
    draggable: true,
    fill: '#4DCB71'
})

leafer.add(rect)
leafer.add(around)

around 控制点在绿色矩形的右下角

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 0, y: 0, width: 100, height: 100, fill: '#FF4A2C' })

const around = new Rect({ 
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    around: { x: 1, y: 1 },
    draggable: true,
    fill: '#4DCB71'
})

leafer.add(rect)
leafer.add(around)

Released under the MIT License.