51 lines
1.1 KiB
Markdown
51 lines
1.1 KiB
Markdown
|
---
|
||
|
|
title: useEffectsControls
|
||
|
|
description: Effekte-Panel-Hilfsmittel für Schatten, Unschärfen, Erweiterungszustand und Scrub/Commit-Flows.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useEffectsControls
|
||
|
|
|
||
|
|
`useEffectsControls()` ist das Effekte-Eigenschafts-Composable, das von Effekte-Panels verwendet wird.
|
||
|
|
|
||
|
|
Es bietet Hilfsmittel für:
|
||
|
|
|
||
|
|
- Standard-Effekte
|
||
|
|
- Schatten- vs. Unschärfe-Logik
|
||
|
|
- erweiterter Element-Zustand
|
||
|
|
- Scrub-Vorschau-Bearbeitung
|
||
|
|
- Commit-on-Finish-Aktualisierungen
|
||
|
|
- Effekttyp- und Farbänderungen
|
||
|
|
|
||
|
|
## Verwendung
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { useEffectsControls } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const effects = useEffectsControls()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Einfaches Beispiel
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const { effectOptions, createDefaultEffect, toggleExpand, scrubEffect, commitEffect } = useEffectsControls()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Praktische Beispiele
|
||
|
|
|
||
|
|
### Einen Standard-Effekt hinzufügen
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const effect = effects.createDefaultEffect()
|
||
|
|
```
|
||
|
|
|
||
|
|
### Scrub-Änderungen in der Vorschau, dann committen
|
||
|
|
|
||
|
|
```ts
|
||
|
|
effects.scrubEffect(node, index, { radius: 12 })
|
||
|
|
effects.commitEffect(node, index, { radius: 12 })
|
||
|
|
```
|
||
|
|
|
||
|
|
## Verwandte APIs
|
||
|
|
|
||
|
|
- [PropertyListRoot](../components/property-list-root)
|