vue实现盖章

Vue 实现盖章功能

在 Vue 中实现盖章功能可以通过结合 Canvas 或 SVG 技术来实现动态盖章效果。以下是两种常见的实现方法：

使用 Canvas 绘制盖章

Canvas 提供强大的绘图能力，适合动态生成印章。以下是一个简单的 Vue 组件示例：

<template>
  <div>
    <canvas ref="stampCanvas" width="200" height="200"></canvas>
    <button @click="applyStamp">盖章</button>
  </div>
</template>

<script>
export default {
  methods: {
    applyStamp() {
      const canvas = this.$refs.stampCanvas;
      const ctx = canvas.getContext('2d');

      // 绘制圆形印章
      ctx.beginPath();
      ctx.arc(100, 100, 80, 0, Math.PI * 2);
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 3;
      ctx.stroke();

      // 添加文字
      ctx.font = '16px Arial';
      ctx.fillStyle = 'red';
      ctx.textAlign = 'center';
      ctx.fillText('公司公章', 100, 100);
    }
  }
}
</script>

使用 SVG 实现盖章

SVG 是矢量图形，适合需要缩放而不失真的场景：

<template>
  <div>
    <svg ref="stampSvg" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="none" stroke="red" stroke-width="3"/>
      <text x="100" y="100" text-anchor="middle" fill="red" font-family="Arial" font-size="16">公司公章</text>
    </svg>
    <button @click="applyStamp">盖章</button>
  </div>
</template>

<script>
export default {
  methods: {
    applyStamp() {
      // 可以在这里动态修改SVG属性
      const text = this.$refs.stampSvg.querySelector('text');
      text.textContent = '已盖章';
    }
  }
}
</script>

实现拖拽盖章

如果需要实现拖拽盖章效果，可以结合鼠标事件：

<template>
  <div @mousemove="dragStamp" @mouseup="stopDrag">
    <div 
      v-if="showStamp" 
      :style="{ left: stampPos.x + 'px', top: stampPos.y + 'px' }"
      class="stamp"
      @mousedown="startDrag"
    >
      公章
    </div>
    <button @click="showStamp = true">显示印章</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showStamp: false,
      stampPos: { x: 0, y: 0 },
      isDragging: false,
      dragOffset: { x: 0, y: 0 }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.dragOffset = {
        x: e.clientX - this.stampPos.x,
        y: e.clientY - this.stampPos.y
      };
    },
    dragStamp(e) {
      if (!this.isDragging) return;
      this.stampPos = {
        x: e.clientX - this.dragOffset.x,
        y: e.clientY - this.dragOffset.y
      };
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
}
</script>

<style>
.stamp {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  cursor: move;
}
</style>

印章图片叠加

如果需要使用预设的印章图片：

<template>
  <div>
    <div class="document" @click="placeStamp($event)">
      <!-- 文档内容 -->
    </div>
    <img 
      v-if="showStamp" 
      :src="stampImage" 
      :style="{ left: stampPos.x + 'px', top: stampPos.y + 'px' }"
      class="stamp-image"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showStamp: false,
      stampPos: { x: 0, y: 0 },
      stampImage: require('@/assets/stamp.png')
    }
  },
  methods: {
    placeStamp(e) {
      this.stampPos = {
        x: e.offsetX - 50, // 居中
        y: e.offsetY - 50
      };
      this.showStamp = true;
    }
  }
}
</script>

<style>
.document {
  width: 800px;
  height: 1000px;
  border: 1px solid #ccc;
  position: relative;
}
.stamp-image {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
}
</style>

以上方法可以根据实际需求进行调整和组合，实现不同风格的盖章功能。