Skip to main content

如何在 React 中在画布上绘制图像?

要使用 React 在画布上渲染图像,可以使用 use-image 钩子。

import React from 'react';
import { Stage, Layer, Image } from 'react-konva';
import useImage from 'use-image';

const URLImage = ({ src, ...rest }) => {
  const [image] = useImage(src, 'anonymous');
  return <Image image={image} {...rest} />;
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <URLImage src="https://konvajs.org/assets/yoda.jpg" x={150} />
      </Layer>
    </Stage>
  );
};

export default App;