Konva React 图像不显示

Question

我有一个非常简单的 Konva-react 应用程序（我直接从文档中取出它）但它不起作用（不显示图像）并显示两个警告：

警告：<Image /> 使用了不正确的大小写。对 React 组件使用 PascalCase，或对 HTML 元素使用小写。
警告：此浏览器无法识别标签 <Image>。如果你打算渲染一个 React 组件，那么它的名字以大写字母开头。我的 Canvas 组件：

import { Image } from 'react-konva';
import useImage from 'use-image';

const url = 'https://konvajs.github.io/assets/yoda.jpg';

export default function Canvas() {  
    const [image] = useImage(url);
    return <Image image={image} />;
}

我的应用组件：

import Canvas from './canvas';

function App() {
  return (
    <div className="App">
      <h2>Conva App</h2>
      <Canvas />
    </div>
  );
}

export default App;

我该如何解决？

Answer 1

您不能简单地在任何地方渲染 Konva 组件。您需要先创建 <Stage> 和一个 <Layer> 组件，然后才添加您的组件：

import { Stage, Layer } from "react-konva";
import Canvas from "./canvas";

function App() {
  return (
    <div className="App">
      <h2>Conva App</h2>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Canvas />
        </Layer>
      </Stage>
    </div>
  );
}

export default App;

您可以查看此 sandbox 以获取工作示例。

Konva React 图像不显示

Konva React image not displaying

javascript

reactjs

konva