position

Element position properties, representing absolute positioning relative to the parent element.

Key Properties

x: number

Position on the x-axis.

Note that offsetX and around will affect the actual position of the element.

y: number

Position on the y-axis.

Note that offsetY and around will affect the actual position of the element.

Key Methods

move ( addX: number | IPointData, addY = 0, transition?: ITranstion )

Move the element incremental operation. Supports directly passing a point object.

The transition parameter indicates whether to apply animation transition.

// Move 10px along both X and Y axis
rect.move(10, 10)

// Use point object to move 10px along both axes
rect.move({ x: 10, y: 10 })

// Move with animation
rect.move(10, 10, true)

rect.move(10, 10, 2) // transition for 2 seconds

moveInner ( addX: number | IPointData, addY = 0, transition?: ITranstion )

Move the element in the local coordinate system incremental operation. Supports directly passing a point object.

moveWorld ( addWorldX: number | IPointData, addWorldY = 0, transition?: ITranstion )

Move the element in the world coordinate system incremental operation. Supports directly passing a point object.

Belongs to

UI Element

Example

Move element using move()

Leafer

// #通过 move() 移动元素 [无动画过渡 (Leafer)]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' })

leafer.add(rect)

setTimeout(() => {

    // 沿 X/Y 轴同时移动 100 像素
    rect.move(100, 100) 

}, 1000)

App

// #通过 move() 移动元素 [无动画过渡 (App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const rect = Rect.one({ fill: '#32cd79' })

app.tree.add(rect)

setTimeout(() => {

    // 沿 X/Y 轴同时移动 100 像素
    rect.move(100, 100) 

}, 1000)

Move element with animation transition

Leafer

// #通过 move() 移动元素 [有动画过渡 (Leafer)]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/animate' // 导入动画插件

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

const rect = Rect.one({ fill: '#32cd79' })

leafer.add(rect)

setTimeout(() => {

    // 沿 X/Y 轴同时移动 100 像素
    rect.move(100, 100, true) 

}, 1000)

App

// #通过 move() 移动元素 [有动画过渡 (App)]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import '@leafer-in/animate' // 导入动画插件

const app = new App({ view: window, editor: {} })

const rect = Rect.one({ fill: '#32cd79' })

app.tree.add(rect)

setTimeout(() => {

    // 沿 X/Y 轴同时移动 100 像素
    rect.move(100, 100, true) 

}, 1000)