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)