uni-app 量角度插件

在uni-app中集成量角器插件（通常指角度测量或尺寸测量功能）可以通过集成第三方库或者自定义组件来实现。以下是一个基于自定义组件的示例，展示如何在uni-app中实现一个简单的量角器功能。

首先，创建一个新的自定义组件，命名为AngleMeasure.vue：

<template>
  <view class="container">
    <canvas canvas-id="canvas" style="width: 300px; height: 300px;"></canvas>
    <view class="controls">
      <button @click="startDrawing">Start Drawing</button>
      <button @click="clearCanvas">Clear</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      context: null,
    };
  },
  mounted() {
    this.context = uni.createCanvasContext('canvas');
  },
  methods: {
    startDrawing(e) {
      const touch = e.touches[0];
      const point = { x: touch.x, y: touch.y };
      this.points.push(point);
      this.draw();
    },
    clearCanvas() {
      this.context.clearRect(0, 0, 300, 300);
      this.context.draw();
      this.points = [];
    },
    draw() {
      this.context.clearRect(0, 0, 300, 300);
      if (this.points.length >= 2) {
        const [p1, p2] = this.points.slice(-2);
        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        const angle = Math.atan2(dy, dx) * 180 / Math.PI;
        this.context.beginPath();
        this.context.moveTo(150, 150); // Center of canvas
        this.context.lineTo(p2.x, p2.y);
        this.context.stroke();
        this.context.setFontSize(14);
        this.context.fillText(`Angle: ${angle.toFixed(2)}°`, 50, 280);
      }
      this.context.draw();
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.controls {
  margin-top: 10px;
}
</style>

在页面的pages/index/index.vue中引入并使用该组件：

<template>
  <view>
    <AngleMeasure />
  </view>
</template>

<script>
import AngleMeasure from '@/components/AngleMeasure.vue';

export default {
  components: {
    AngleMeasure,
  },
};
</script>

上述代码创建了一个简单的量角器组件，用户可以通过触摸屏幕来绘制线条，并显示线条与画布中心之间的角度。请注意，这只是一个基础示例，实际应用中可能需要更复杂的逻辑来处理多点触控、角度计算的精确性、用户界面的优化等问题。