react实现画布
React 实现画布的方法
在 React 中实现画布功能通常可以通过以下几种方式完成，具体取决于需求场景和复杂度。
使用 HTML5 Canvas API
通过原生 HTML5 Canvas API 结合 React 的 useRef 和 useEffect 钩子，可以动态操作画布。
import React, { useRef, useEffect } from 'react';
const CanvasComponent = () => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// 绘制图形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
}, []);
return <canvas ref={canvasRef} width={400} height={400} />;
};
export default CanvasComponent;使用第三方库（如 react-konva）
对于更复杂的图形操作（如拖拽、缩放等），可以使用专门的 React 画布库，例如 react-konva。
import React from 'react';
import { Stage, Layer, Rect, Circle } from 'react-konva';
const KonvaCanvas = () => {
return (
<Stage width={500} height={500}>
<Layer>
<Rect x={50} y={50} width={100} height={100} fill="red" />
<Circle x={200} y={100} radius={50} fill="green" />
</Layer>
</Stage>
);
};
export default KonvaCanvas;使用 SVG 实现画布
如果需求偏向矢量图形，可以直接通过 React 渲染 SVG 元素。
const SvgCanvas = () => {
return (
<svg width="400" height="400">
<rect x="50" y="50" width="100" height="100" fill="orange" />
<circle cx="250" cy="100" r="50" fill="purple" />
</svg>
);
};
export default SvgCanvas;动态交互示例
结合事件处理实现动态交互，例如点击画布绘制图形。
import React, { useRef, useState } from 'react';
const InteractiveCanvas = () => {
const canvasRef = useRef(null);
const [shapes, setShapes] = useState([]);
const handleClick = (e) => {
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setShapes([...shapes, { x, y }]);
};
return (
<div>
<canvas
ref={canvasRef}
width={400}
height={400}
onClick={handleClick}
style={{ border: '1px solid black' }}
/>
{shapes.map((shape, i) => (
<div key={i}>Shape at ({shape.x}, {shape.y})</div>
))}
</div>
);
};
export default InteractiveCanvas;注意事项
- 性能优化：频繁操作画布时需注意重绘性能，避免不必要的渲染。
- 响应式设计：画布尺寸需适配不同屏幕，可通过监听
resize事件动态调整。 - 清理资源：组件卸载时需清理定时器或事件监听，防止内存泄漏。
以上方法覆盖了从基础到高级的画布实现需求，可根据具体场景选择合适方案。
