reactjs - 康瓦线没有出现

Question

嗨，当我使用 React 为 Web 应用程序编写一些代码时，我决定使用库 Konva 来制作形状。

class Prism extends Component{

render() {
  return(
    <p style = {col}>
        <Stage width={window.innerWidth/2} height={window.innerHeight/2}>
        <Layer>
          <Rect
            x={window.innerWidth/12}
            y={window.innerHeight/12}
            width={this.props.BigRedRectangleWidth- 2*this.props.SliderValueforCorner}
            height={this.props.BigRedRectangleHeight- 2*this.props.SliderValueforCorner}
            fill="Red"
            shadowBlur={0}

          />
        </Layer>
    <Layer>
      <Rect
        x={window.innerWidth/12+(0.70710*this.props.SliderValueforCorner)}
        y={window.innerHeight/12+(0.70710*this.props.SliderValueforCorner)}
        width={this.props.BigRedRectangleWidth- 2*this.props.SliderValueforCorner}
        height={this.props.BigRedRectangleHeight- 2*this.props.SliderValueforCorner}
        fill="Black"
        shadowBlur={0}
      />
    </Layer>
    <Layer>
      <Line
        points={[73, 70, 340, 23, 450, 60, 500, 20]}
        fill="Black"
      />
    </Layer>
    </Stage>
    </p>
        );
      }
}
export default Prism;
const Stages = {
    alignSelf:'center',
}
const col = {
    textAlign: 'center',
    width: '50%',
    marginTop: '20px',
    borderRadius: '4',
    borderWidth: '0.5',
    borderColor: '#d6d7da',
    marginBottom: '100px'
  }

但是，我定义的行没有出现。矩形显示得很好，所以我只是想知道我在哪里搞砸了。

谢谢你！

Answer 1

你的线路没有关闭。所以它不能有fill。我猜你想stroke改用：

<Line
  points={[73, 70, 340, 23, 450, 60, 500, 20]}
  stroke="black"
/>