如何将舞台宽度和高度设置为 100% React Konva

Question

我想将舞台的宽度和高度设置为 100%。有点像这样，这样它就会填充父级 div：

<Stage
    width="100%"
    height="100%"
></Stage>

这可能吗？谢谢！

Answer 1

由于我们无法将 的宽度和高度设置为“100%”，因此我们必须找到其父容器的宽度和高度（以像素为单位），然后将这些值设置为宽度和高度

import React, { useEffect, useRef, useState } from "react"

import { Stage, Layer, Rect } from "react-konva"

export const View = () => {
  const divRef = useRef(null)
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0
  })

  // We cant set the h & w on Stage to 100% it only takes px values so we have to
  // find the parent container's w and h and then manually set those !
  useEffect(() => {
    if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
      setDimensions({
        width: divRef.current.offsetWidth,
        height: divRef.current.offsetHeight
      })
    }
  }, [])

  return (
    <div ref={divRef}>
      <Stage width={dimensions.width} height={dimensions.height}>
        <Layer>
          <Rect fill="red" x={0} y={0} width={150} height={150}></Rect>
        </Layer>
      </Stage>
    </div>
  )
}