How to develop a real-time drawing sharing application using Vue and Canvas

How to use Vue and Canvas to develop a real-time drawing sharing application

Introduction:
In the era of the Internet, real-time collaboration has become an indispensable part of our life and work. Developing real-time drawing sharing applications is a very common requirement. This article will introduce how to use Vue and Canvas to develop a real-time drawing sharing application, and give corresponding code examples.

1. Preparation
Before starting development, we need to ensure that the Vue and Canvas development environments have been installed on the computer. If it is not installed, you can use the following commands to install it:

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

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

# 安装Canvas
npm install canvas

2. Draw the basic drawing board interface
Next we will use Vue’s template syntax to draw the basic drawing board interface. In the App.vue file, add the following code:

<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>

In the above code, we bind the mousedown, mousemove and mouseup events to implement the real-time drawing function. Among them, the mousedown event indicates that drawing starts when the mouse is pressed, the mousemove event indicates that the path is drawn when the mouse moves, and the mouseup event indicates that drawing stops when the mouse is raised.

3. Real-time sharing function
To realize the real-time sharing function, we can use WebSocket for real-time messaging. In this article, we will use the socket.io library to simplify the use of WebSockets.

First, we need to install the socket.io library in the project:

npm install socket.io

Then, in the main.js file, add the following code:

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');

In the above code , we will create a socket instance and set it as a prototype property of Vue so that it can be used throughout the project.

Next, in the methods attribute of the App.vue file, add the following methods:

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');
  },
},

In the above code, we added three socket.emit() method calls, respectively in Send corresponding messages to the WebSocket server when starting drawing, drawing paths, and stopping drawing.

Finally, we need to implement the WebSocket server on the server side. Here we use Node.js to build the server. Create a new server.js file in the root directory of the project and add the following code:

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');
});

In the above code, we created an HTTP server and upgraded it to a WebSocket server using the socket.io library. Then, we added listeners for startDrawing, draw, and stopDrawing in the connection event to receive messages sent from the client and broadcast them to other connected clients.

4. Run the application
Now that we have completed the development of the application, we can start the application through the following command:

npm run serve

According to the command line prompts, we can use http:/ /localhost:8080 to access the application. Now, we can open the app in multiple browser windows, use the mouse to draw on the artboard, and share it with other users in real time.

Conclusion:
This article introduces how to use Vue and Canvas to develop a real-time drawing sharing application, and combine it with the socket.io library to implement real-time messaging functions. Through the introduction of this article, readers can master the basic steps of using Vue and Canvas to develop real-time drawing sharing applications, and how to use WebSocket to implement real-time messaging. I hope this article is helpful to readers, thank you for reading.

The above is the detailed content of How to develop a real-time drawing sharing application using Vue and Canvas. For more information, please follow other related articles on the PHP Chinese website!