如何在Vuejs2 Webpack模板项目中使用draw2d touch canvas库？求实现示例

嗨，当然可以在基于Webpack模板的Vue.js 2项目中使用draw2d touch canvas库！我之前做过类似的集成，下面给你一份完整的实现示例，步骤清晰，你可以直接照着操作：

1. 安装依赖 #

首先在项目根目录下通过npm或yarn安装draw2d-touch：

# npm
npm install draw2d-touch --save

# 或者 yarn
yarn add draw2d-touch

2. 全局导入样式（可选但推荐） #

在src/main.js中导入draw2d的样式文件，确保组件能正常渲染：

import Vue from 'vue'
import App from './App.vue'
// 导入draw2d的样式
import 'draw2d-touch/dist/draw2d.css'

Vue.config.productionTip = false

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

3. 编写Draw2d画布组件 #

创建一个名为Draw2dCanvas.vue的组件文件，放在src/components目录下：

<template>
  <!-- 作为draw2d画布的容器 -->
  <div class="draw2d-canvas-container" ref="canvasContainer"></div>
</template>

<script>
// 导入draw2d库
import draw2d from 'draw2d-touch'

export default {
  name: 'Draw2dCanvas',
  mounted() {
    // 确保DOM已挂载后初始化画布
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      // 创建画布实例，绑定到容器元素
      const canvas = new draw2d.Canvas(this.$refs.canvasContainer)

      // 创建第一个矩形节点
      const rect1 = new draw2d.shape.basic.Rectangle({
        x: 80,
        y: 80,
        width: 120,
        height: 70,
        bgColor: '#4CAF50',
        color: '#2E7D32',
        label: 'Vue + Draw2d'
      })
      canvas.add(rect1)

      // 创建第二个矩形节点
      const rect2 = new draw2d.shape.basic.Rectangle({
        x: 300,
        y: 180,
        width: 120,
        height: 70,
        bgColor: '#2196F3',
        color: '#1565C0',
        label: 'Touch Support'
      })
      canvas.add(rect2)

      // 添加节点间的连接线
      const connection = new draw2d.Connection()
      connection.setSource(rect1.getOutputPort(0))
      connection.setTarget(rect2.getInputPort(0))
      canvas.add(connection)

      // 可选：添加画布交互监听
      canvas.on('select', (event) => {
        console.log('选中元素:', event.figure)
      })
    }
  }
}
</script>

<style scoped>
.draw2d-canvas-container {
  width: 100%;
  height: 600px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
}
</style>

4. 在页面中使用组件 #

修改src/App.vue，导入并使用刚才创建的画布组件：

<template>
  <div id="app">
    <h2 class="demo-title">Vue 2 + Draw2d Touch 演示</h2>
    <Draw2dCanvas />
  </div>
</template>

<script>
import Draw2dCanvas from './components/Draw2dCanvas.vue'

export default {
  name: 'App',
  components: {
    Draw2dCanvas
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.demo-title {
  margin-bottom: 30px;
}
</style>

一些注意事项 #

• 一定要在mounted钩子中初始化draw2d画布，因为此时容器元素已经被渲染到DOM中，能被正确获取；
• 如果遇到draw2d is not defined的报错，可以尝试在webpack配置中添加ProvidePlugin，将draw2d注册为全局变量：

  // 在webpack.config.js中
  const webpack = require('webpack')
  
  module.exports = {
    // ...其他配置
    plugins: [
      new webpack.ProvidePlugin({
        draw2d: 'draw2d-touch'
      })
    ]
  }
  

• draw2d touch支持触摸交互，如果你需要适配移动端，可以调整画布容器的尺寸和响应式样式；
• 更多draw2d的API用法，可以参考其官方文档（查看库的README或源码注释即可）。

内容的提问来源于stack exchange，提问作者Dimitris Theodoropoulos