65 lines
1 KiB
Markdown
65 lines
1 KiB
Markdown
|
---
|
||
|
|
title: usePosition
|
||
|
|
description: Position, Größe, Rotation, Ausrichtung und Spiegelung ausgewählter Knoten lesen und aktualisieren.
|
||
|
|
---
|
||
|
|
|
||
|
|
# usePosition
|
||
|
|
|
||
|
|
`usePosition()` ist ein Steuerelemente-Composable für positions-bezogene UI.
|
||
|
|
|
||
|
|
Es gibt Werte für ausgewählte Knoten zurück wie:
|
||
|
|
|
||
|
|
- `x`
|
||
|
|
- `y`
|
||
|
|
- `width`
|
||
|
|
- `height`
|
||
|
|
- `rotation`
|
||
|
|
|
||
|
|
sowie Aktionen wie:
|
||
|
|
|
||
|
|
- ausrichten
|
||
|
|
- spiegeln
|
||
|
|
- rotieren
|
||
|
|
- numerische Eigenschaften scrubben/aktualisieren
|
||
|
|
|
||
|
|
## Verwendung
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { usePosition } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const position = usePosition()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Einfaches Beispiel
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const { x, y, width, height, rotation, updateProp, commitProp } = usePosition()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Praktische Beispiele
|
||
|
|
|
||
|
|
### Ausgewählte Knoten ausrichten
|
||
|
|
|
||
|
|
```ts
|
||
|
|
position.align('horizontal', 'center')
|
||
|
|
position.align('vertical', 'min')
|
||
|
|
```
|
||
|
|
|
||
|
|
### Auswahl spiegeln
|
||
|
|
|
||
|
|
```ts
|
||
|
|
position.flip('horizontal')
|
||
|
|
position.flip('vertical')
|
||
|
|
```
|
||
|
|
|
||
|
|
### Auswahl rotieren
|
||
|
|
|
||
|
|
```ts
|
||
|
|
position.rotate(90)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Verwandte APIs
|
||
|
|
|
||
|
|
- [useLayout](./use-layout)
|
||
|
|
- [useAppearance](./use-appearance)
|