Comment développer une application de partage de dessins en temps réel à l'aide de Vue et Canvas

Comment utiliser Vue et Canvas pour développer une application de partage de dessins en temps réel

Introduction :
À l'ère d'Internet, la collaboration en temps réel est devenue un élément indispensable de notre vie et de notre travail. Développer des applications de partage de dessins en temps réel est une exigence très courante. Cet article expliquera comment utiliser Vue et Canvas pour développer une application de partage de dessins en temps réel et donnera des exemples de code correspondants.

1. Préparation
Avant de commencer le développement, nous devons nous assurer que les environnements de développement Vue et Canvas ont été installés sur l'ordinateur. S'il n'est pas installé, vous pouvez utiliser les commandes suivantes pour l'installer :

# 安装Vue
npm install -g @vue/cli

# 创建一个新的Vue项目
vue create draw-app

# 安装Canvas
npm install canvas

2. Dessinez l'interface de base de la planche à dessin
Ensuite, nous utiliserons la syntaxe du modèle de Vue pour dessiner l'interface de base de la planche à dessin. Dans le fichier App.vue, ajoutez le code suivant :

<template>
  <div class="app">
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      context: null,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.context = this.$refs.canvas.getContext('2d');
    this.$refs.canvas.width = window.innerWidth;
    this.$refs.canvas.height = window.innerHeight;
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      [this.lastX, this.lastY] = [event.pageX, event.pageY];
    },
    draw(event) {
      if (!this.isDrawing) return;
      const { context, lastX, lastY } = this;
      context.beginPath();
      context.moveTo(lastX, lastY);
      context.lineTo(event.pageX, event.pageY);
      context.stroke();
      [this.lastX, this.lastY] = [event.pageX, event.pageY];
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

<style>
.app {
  background-color: #eee;
}
</style>

Dans le code ci-dessus, nous lions les événements mousedown, mousemove et mouseup pour implémenter la fonction de dessin en temps réel. Parmi eux, l'événement mousedown indique que le dessin commence lorsque la souris est enfoncée, l'événement mousemove indique que le chemin est dessiné lorsque la souris se déplace et l'événement mouseup indique que le dessin s'arrête lorsque la souris est levée.

3. Fonction de partage en temps réel
Pour réaliser la fonction de partage en temps réel, nous pouvons utiliser WebSocket pour la messagerie en temps réel. Dans cet article, nous utiliserons la bibliothèque socket.io pour simplifier l'utilisation des WebSockets.

Tout d'abord, nous devons installer la bibliothèque socket.io dans le projet :

npm install socket.io

Ensuite, dans le fichier main.js, ajoutez le code suivant :

import Vue from 'vue';
import App from './App.vue';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');
Vue.prototype.$socket = socket;

new Vue({
  render: h => h(App),
}).$mount('#app');

Dans le code ci-dessus, nous allons créer une instance de socket et définir it Propriétés du prototype pour Vue à utiliser tout au long du projet.

Ensuite, dans l'attribut méthodes du fichier App.vue, ajoutez la méthode suivante :

methods: {
  // 省略之前的代码...

  startDrawing(event) {
    this.isDrawing = true;
    [this.lastX, this.lastY] = [event.pageX, event.pageY];
    this.$socket.emit('startDrawing', { x: event.pageX, y: event.pageY });
  },

  draw(event) {
    if (!this.isDrawing) return;
    const { context, lastX, lastY } = this;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(event.pageX, event.pageY);
    context.stroke();
    [this.lastX, this.lastY] = [event.pageX, event.pageY];
    this.$socket.emit('draw', { x: event.pageX, y: event.pageY });
  },

  stopDrawing() {
    this.isDrawing = false;
    this.$socket.emit('stopDrawing');
  },
},

Dans le code ci-dessus, nous avons ajouté trois appels de méthode socket.emit(), commençant le dessin, dessinant le chemin et arrêtant le dessin lors de l'envoi. le message correspondant au serveur WebSocket.

Enfin, nous devons implémenter le serveur WebSocket côté serveur. Ici, nous utilisons Node.js pour construire le serveur. Créez un nouveau fichier server.js dans le répertoire racine du projet et ajoutez le code suivant :

const server = require('http').createServer();
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  },
});

io.on('connection', socket => {
  console.log('New client connected');

  socket.on('startDrawing', (data) => {
    socket.broadcast.emit('startDrawing', data);
  });

  socket.on('draw', (data) => {
    socket.broadcast.emit('draw', data);
  });

  socket.on('stopDrawing', () => {
    socket.broadcast.emit('stopDrawing');
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Dans le code ci-dessus, nous avons créé un serveur HTTP et l'avons mis à niveau vers un serveur WebSocket à l'aide de la bibliothèque socket.io. Ensuite, nous avons ajouté des écouteurs pour startDrawing, draw et stopDrawing dans l'événement de connexion pour recevoir les messages envoyés par le client et les diffuser aux autres clients connectés.

4. Exécutez l'application
Maintenant que nous avons terminé le développement de l'application, nous pouvons démarrer l'application via la commande suivante :

npm run serve

Selon les invites de la ligne de commande, nous pouvons accéder à l'application via http://localhost :8080. Désormais, nous pouvons ouvrir l'application dans plusieurs fenêtres de navigateur, utiliser la souris pour dessiner sur le plan de travail et la partager avec d'autres utilisateurs en temps réel.

Conclusion :
Cet article explique comment utiliser Vue et Canvas pour développer une application de partage de dessins en temps réel et la combiner avec la bibliothèque socket.io pour implémenter une fonctionnalité de messagerie en temps réel. Grâce à l'introduction de cet article, les lecteurs peuvent maîtriser les étapes de base de l'utilisation de Vue et Canvas pour développer des applications de partage de dessins en temps réel, et comment utiliser WebSocket pour implémenter la messagerie en temps réel. J'espère que cet article sera utile aux lecteurs, merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!