单击按钮时用 react-konva 绘制一个矩形

Question

我正在尝试用 Konva 绘制一个矩形 when 单击按钮

这是代码：

import * as React from 'react'
import Konva from 'konva'
import { Stage, Layer, Line, Text, Rect, Group} from 'react-konva'
import { Portal, Html } from 'react-konva-utils'

export default function W(props) {

  const toggleShown = () => {
    setShown(!shown)
    console.log("shown: ", shown)
  }

  return (
    <Stage
      x={stagePos.x}
      y={stagePos.y}
      width={window.innerWidth}
      height={window.innerHeight}
    >
     <Layer>
        <Html>

          <button onClick={toggleShown}>Click</button>
          {
            shown
            &&
            <p>Hello World!!!</p>
            &&

            <Stage>
              <Layer>
                  <Rect width={100} height={100} fill="white" draggable />
              </Layer>
            </Stage>
          }
        </Html>
     </Layer>
    </Stage>
  )
}

在执行期间单击按钮时，我在控制台日志中看到：

shown:  false
shown:  true

很好，但在深色背景上我看不到白色矩形。

我做错了什么？如何让它发挥作用？

Answer 1

您的示例不起作用，因为内部舞台没有 width/height。所以，默认是0。

    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Html>
          <button onClick={toggleShown}>Click</button>
          {shown && <p>Hello World!!!</p> && (
            <Stage width={window.innerWidth} height={window.innerHeight}>
              <Layer>
                <Rect width={100} height={100} fill="black" draggable />
              </Layer>
            </Stage>
          )}
        </Html>
      </Layer>
    </Stage>

https://codesandbox.io/s/compassionate-proskuriakova-zymx22?file=/src/index.js:331-797

P.S。可能您不应该在原始舞台上放置另一个舞台。只在第一阶段显示矩形：

 <Layer>
        <Html>
          <button onClick={toggleShown}>Click</button>
        </Html>
        {shown && <Rect width={100} height={100} fill="white" draggable />}
     </Layer>

单击按钮时用 react-konva 绘制一个矩形

draw with react-konva a rectangle when clicking a button

react-konva

konva