Конва Лайн не появляется - PullRequest
0 голосов
/ 21 февраля 2019

Привет, когда я писал код для веб-приложения с использованием React, я решил использовать библиотеку 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'
  }
Однако определенная мной строка не отображается.Прямоугольники выглядят хорошо, поэтому мне просто интересно, где я все испортила.

Спасибо!

1 Ответ

0 голосов
/ 21 февраля 2019

Ваша линия не закрыта.Так что не может иметь fill.Я думаю, вы хотите использовать stroke вместо:

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