https://github.com/carmhack/vue3-canvas-app
https://github.com/carmhack/vue3-canvas-app
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/carmhack/vue3-canvas-app
- Owner: carmhack
- Created: 2022-07-16T16:34:55.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-16T16:57:48.000Z (almost 4 years ago)
- Last Synced: 2025-09-12T04:51:33.989Z (9 months ago)
- Language: Vue
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Vue 3 Canvas App
Questa repository contiene un'app realizzata in Vue 3 con la Composition API.
Permette la creazione, la modifica e lo spostamento di alcune forme (rettangolo, cerchio, linea, testo) su una canvas.
**N.B.** l'app ha un utilizzo didattico.
Demo: [Canvas App](https://vue-canvas-example.netlify.app/)
#### Componenti
- **Board**: gestisce la canvas (draw e d&d).
```js
const props = defineProps(['shapes']);
const emit = defineEmits(['moveShape', 'selectShape']);
```
- **ControlBoard**: gestisce i pulsanti per la creazione delle forme.
```js
const emit = defineEmits(['createShape']);
```
- **Sidebar**: mostra le proprietà della forma selezionata, permettendone la modifica e la cancellazione.
```js
const props = defineProps(['selectedShape']);
const emit = defineEmits(['changeProp', 'removeShape']);
```
- **App**: gestisce lo stato dell'app.
```js
const state = reactive({
shapes: [],
selectedShape: null,
selectedShapeIndex: -1
});
```
#### Utilizzo
```js
npm i
npm run dev
```