当前位置：首页 > React

react实现盖章

2026-01-26 15:21:19React

React 实现盖章效果的方法

在 React 中实现盖章效果可以通过 CSS 动画、Canvas 绘制或 SVG 实现。以下是几种常见的方法：

使用 CSS 动画和伪元素

通过 CSS 关键帧动画模拟盖章动作，结合伪元素生成印章图形。

import React from 'react';
import './Stamp.css';

const Stamp = () => {
  return (
    <div className="stamp-container">
      <div className="stamp">批准</div>
    </div>
  );
};

export default Stamp;

/* Stamp.css */
.stamp-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.stamp {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 3px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: red;
  transform: scale(0);
  animation: stamp 0.5s ease-out forwards;
}

@keyframes stamp {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

使用 Canvas 绘制动态印章

通过 Canvas API 动态绘制印章，适合需要更复杂图形的情况。

import React, { useRef, useEffect } from 'react';

const CanvasStamp = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    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 = '20px Arial';
    ctx.fillStyle = 'red';
    ctx.textAlign = 'center';
    ctx.fillText('财务专用章', 100, 100);
  }, []);

  return <canvas ref={canvasRef} width={200} height={200} />;
};

export default CanvasStamp;

使用 SVG 实现矢量印章

SVG 实现的印章具有矢量特性，缩放不会失真。

import React from 'react';

const SvgStamp = () => {
  return (
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="none" stroke="red" strokeWidth="3" />
      <text x="100" y="100" fill="red" textAnchor="middle" dominantBaseline="middle" fontSize="20">
        公司公章
      </text>
    </svg>
  );
};

export default SvgStamp;

添加交互功能

结合 React 状态管理实现点击盖章效果。

react实现盖章

import React, { useState } from 'react';

const InteractiveStamp = () => {
  const [stamped, setStamped] = useState(false);

  return (
    <div onClick={() => setStamped(true)} style={{ cursor: 'pointer' }}>
      {stamped && (
        <div style={{
          width: '150px',
          height: '150px',
          border: '3px solid red',
          borderRadius: '50%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: 'red',
          fontSize: '24px',
          transform: 'scale(1)',
          animation: 'stamp 0.5s ease-out'
        }}>
          已批准
        </div>
      )}
      {!stamped && <p>点击此处盖章</p>}
    </div>
  );
};

export default InteractiveStamp;