Cara membangunkan aplikasi perkongsian lukisan masa nyata menggunakan Vue dan Canvas

Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi perkongsian lukisan masa nyata

Pengenalan:
Dalam era Internet, kerjasama masa nyata telah menjadi bahagian yang amat diperlukan dalam kehidupan dan kerja kami. Membangunkan aplikasi perkongsian lukisan masa nyata adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi perkongsian lukisan masa nyata dan memberikan contoh kod yang sepadan.

1. Persediaan
Sebelum memulakan pembangunan, kita perlu memastikan bahawa persekitaran pembangunan Vue dan Canvas telah dipasang pada komputer. Jika ia tidak dipasang, anda boleh menggunakan arahan berikut untuk memasangnya:

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

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

# 安装Canvas
npm install canvas

2. Lukis antara muka papan lukisan asas
Seterusnya, kami akan menggunakan sintaks templat Vue untuk melukis antara muka papan lukisan asas. Dalam fail App.vue, tambahkan kod berikut:

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

Dalam kod di atas, kami mengikat acara turun tetikus, gerakan tetikus dan naik tetikus untuk melaksanakan fungsi lukisan masa nyata. Antaranya, peristiwa turun tetikus menunjukkan bahawa lukisan bermula apabila tetikus ditekan, peristiwa gerakan tetikus menunjukkan bahawa laluan dilukis apabila tetikus bergerak, dan peristiwa tetikus naik menunjukkan bahawa lukisan berhenti apabila tetikus dinaikkan.

3. Fungsi perkongsian masa nyata
Untuk merealisasikan fungsi perkongsian masa nyata, kami boleh menggunakan WebSocket untuk pemesejan masa nyata. Dalam artikel ini, kami akan menggunakan perpustakaan socket.io untuk memudahkan penggunaan WebSockets.

Mula-mula, kita perlu memasang perpustakaan socket.io dalam projek:

npm install socket.io

Kemudian, dalam fail main.js, tambah kod berikut:

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

Dalam kod di atas, kami akan mencipta contoh soket dan tetapkan ia Prototaip sifat untuk Vue untuk digunakan sepanjang projek.

Seterusnya, dalam atribut kaedah fail App.vue, tambahkan kaedah berikut:

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

Dalam kod di atas, kami menambah tiga panggilan kaedah socket.emit(), memulakan lukisan, laluan lukisan dan berhenti melukis mesej yang sepadan kepada pelayan WebSocket.

Akhir sekali, kita perlu melaksanakan pelayan WebSocket di bahagian pelayan. Di sini kami menggunakan Node.js untuk membina pelayan. Cipta fail server.js baharu dalam direktori akar projek dan tambah kod berikut:

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

Dalam kod di atas, kami mencipta pelayan HTTP dan menaik tarafnya kepada pelayan WebSocket menggunakan perpustakaan socket.io. Kemudian, kami menambah pendengar untuk startDrawing, draw dan stopDrawing dalam acara sambungan untuk menerima mesej yang dihantar daripada klien dan menyiarkannya kepada klien lain yang disambungkan.

4 Jalankan aplikasi
Sekarang kita telah menyelesaikan pembangunan aplikasi, kita boleh memulakan aplikasi melalui arahan berikut:

npm run serve

Mengikut gesaan baris arahan, kita boleh mengakses aplikasi melalui http://localhost :8080. Kini, kami boleh membuka apl dalam berbilang tetingkap penyemak imbas, menggunakan tetikus untuk melukis pada papan seni dan berkongsi dengan pengguna lain dalam masa nyata.

Kesimpulan:
Artikel ini memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi perkongsian lukisan masa nyata, dan menggabungkannya dengan perpustakaan socket.io untuk melaksanakan fungsi pemesejan masa nyata. Melalui pengenalan artikel ini, pembaca boleh menguasai langkah asas menggunakan Vue dan Canvas untuk membangunkan aplikasi perkongsian lukisan masa nyata, dan cara menggunakan WebSocket untuk melaksanakan pemesejan masa nyata. Semoga artikel ini bermanfaat kepada pembaca, terima kasih kerana membaca.

Atas ialah kandungan terperinci Cara membangunkan aplikasi perkongsian lukisan masa nyata menggunakan Vue dan Canvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!