安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas

前期web浏览器上面canvas可以很支持vue页面，因为要用原生插件组件必须是nvue才能使用显示出来所以重构（真的巨坑），然后之前写的绘制功能canvas又不能生效了是因为nvue原生weex啥的原因导致直接方法无效我丢。

话不多说实现方式上效果：

思路：nvue + <web-view> + H5 Canvas

在 nvue 页面中放 <web-view src="/static/draw.html">

draw.html 用标准 HTML5 Canvas + JS 实现手指绘制

1️⃣ nvue 页面：pages/home/draw.nvue

  <template>
    <view class="page">
      <web-view :src="webViewUrl" class="webview"></web-view>
    </view>
  </template>

  <script>
  export default {
    data() {
      return {
        // H5 文件路径，放在 /static/draw.html
        webViewUrl: '/static/draw.html'
      }
    }
  }
  </script>

  <style scoped>
  .page {
    flex: 1;
  }
  .webview {
    flex: 1;
  }
  </style>

2️⃣ H5 页面：static/draw.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>手指画笔</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #111;
        overflow: hidden;
      }
      #canvas {
        display: block;
        background: #fff;
        touch-action: none; /* 防止滚动 */
      }
      #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
      }
      button {
        margin-right: 10px;
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div id="controls">
      <button id="clearBtn">清空</button>
      <button id="logBtn">打印坐标</button>
    </div>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 全屏自适应
      function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
      window.addEventListener('resize', resizeCanvas);
      resizeCanvas();

      ctx.strokeStyle = '#000';
      ctx.lineWidth = 2;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      let drawing = false;
      let lastX = 0;
      let lastY = 0;
      let points = []; // 存储轨迹坐标

      canvas.addEventListener('touchstart', (e) => {
        drawing = true;
        const touch = e.touches[0];
        lastX = touch.clientX;
        lastY = touch.clientY;
        points.push({x: lastX, y: lastY});
      });

      canvas.addEventListener('touchmove', (e) => {
        if (!drawing) return;
        const touch = e.touches[0];
        const x = touch.clientX;
        const y = touch.clientY;

        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.stroke();

        lastX = x;
        lastY = y;
        points.push({x, y});
      });

      canvas.addEventListener('touchend', () => {
        drawing = false;
      });

      // 清空按钮
      document.getElementById('clearBtn').addEventListener('click', () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        points = [];
      });

      // 打印轨迹坐标
      document.getElementById('logBtn').addEventListener('click', () => {
        console.log('轨迹坐标:', points);
        alert('已打印到控制台');
      });
    </script>
  </body>
  </html>