2

I have a React project with TypeScript. I'm using the react-konva package to draw some shapes. How can I add to my shape a border like at HTML (border: 1px solid black)?

My code:

       <Rect
          x={103}
          y={103}
          width={144}
          height={44}
          // here i need a border
          fill="#E2E6EA"
          draggable
          onDragStart={this.handleDragStart}
          onDragEnd={this.handleDragEnd}
        />
Mohammadreza Yektamaram
  • 1,392
  • 16
  • 36
Vladimir Arkhangelskii
  • 120
  • 1
  • 11
  • 1
    You can use `drawBorder` property in react-konva. [Source](https://konvajs.org/api/Konva.Rect.html) or can use propeties `strokeWidth: 10, stroke: 'lime'` – stud3nt Nov 21 '19 at 08:09

1 Answers1

6

You have to set the border using strokeWidth & stroke attributes.

<Rect
    x={103}
    y={103}
    width={144}
    height={44}
    // here i need a border
    fill="#E2E6EA"
    draggable
    onDragStart={this.handleDragStart}
    onDragEnd={this.handleDragEnd}
    strokeWidth={1} // border width
    stroke="red" // border color
/>