当前位置：首页 > VUE

vue实现盖章组件

2026-03-08 18:23:27VUE

Vue 实现盖章组件的方法

基本思路

使用Vue实现盖章组件通常需要结合Canvas绘图技术。通过监听鼠标事件或触摸事件，在指定位置绘制印章图案（如圆形、方形或自定义图形），并添加文字或图标。

核心代码示例

<template>
  <div class="stamp-container">
    <canvas ref="canvas" @click="handleStamp"></canvas>
  </div>
</template>

<script>
export default {
  methods: {
    handleStamp(event) {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top

      // 绘制印章
      ctx.beginPath()
      ctx.arc(x, y, 50, 0, 2 * Math.PI)
      ctx.strokeStyle = 'red'
      ctx.lineWidth = 3
      ctx.stroke()

      // 添加文字
      ctx.font = '16px Arial'
      ctx.fillStyle = 'red'
      ctx.textAlign = 'center'
      ctx.fillText('已审核', x, y + 5)
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight
  }
}
</script>

<style>
.stamp-container {
  width: 100%;
  height: 500px;
  border: 1px dashed #ccc;
}
canvas {
  width: 100%;
  height: 100%;
}
</style>

进阶功能实现

自定义印章样式


drawCustomStamp(ctx, x, y) {
// 绘制圆形外框
ctx.beginPath()
ctx.arc(x, y, 60, 0, 2 * Math.PI)
ctx.strokeStyle = '#f00'
ctx.lineWidth = 4
ctx.stroke()

// 绘制五角星 drawStar(ctx, x, y, 20, 5, 0.5)

// 环形文字 drawCircularText(ctx, '专用印章', x, y, 45) }

function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) { // 五角星绘制逻辑 }

function drawCircularText(ctx, text, x, y, radius) { // 环形文字绘制逻辑 }

vue实现盖章组件


2. 拖拽盖章功能
```javascript
data() {
  return {
    isDragging: false,
    stampImage: null
  }
},
methods: {
  startDrag() {
    this.isDragging = true
  },
  endDrag() {
    this.isDragging = false
  },
  moveStamp(event) {
    if (!this.isDragging) return
    // 更新印章位置并重绘
  }
}

保存盖章状态

saveStamp() {
const canvas = this.$refs.canvas
const image = canvas.toDataURL('image/png')
localStorage.setItem('stampData', image)
},
loadStamp() {
const imageData = localStorage.getItem('stampData')
if (imageData) {
 const img = new Image()
 img.onload = () => {
   const ctx = canvas.getContext('2d')
   ctx.drawImage(img, 0, 0)
 }
 img.src = imageData
}
}