around
围绕 around 点绘制元素，比 origin 多个步骤，会把元素内容的 around 点移动到起始坐标。
图中将元素内容的 around 点 ， 移动到元素的起始坐标对齐放置并旋转 30 度。
关键属性
around: IAlign | IUnitPointData
元素的 around 点，相对元素的实际内容定位，基础元素及 Group 均支持。
ts
// 方位
type IAlign =
| 'top-left'
| 'top'
| 'top-right'
| 'right'
| 'bottom-right'
| 'bottom'
| 'bottom-left'
| 'left'
| 'center'
rect.around = 'center'
// 坐标点
interface IUnitPointData {
type?: 'percent' | 'px'
x: number
y: number
}
rect.around = {
type: 'percent',
x: 0.5, // 50% width 百分比坐标点
y: 0.5, // 50% height
}
rect.around = {
x: 50, // 50px 像素值坐标点
y: 50, // 50px
}归属
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: 'bottom-right',
draggable: true,
fill: '#4DCB71'
})
leafer.add(rect)
leafer.add(around)