如何为我的 react-konva 形状添加边框？答案

【问题标题】：How can I add a border to my react-konva shape?如何为我的 react-konva 形状添加边框？
【发布时间】：2019-11-21 07:41:22
【问题描述】：

我有一个带有 TypeScript 的 React 项目。我正在使用 react-konva 包来绘制一些形状。如何在我的形状中添加一个类似于 HTML (border: 1px solid black) 的边框？

我的代码：

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

【问题讨论】：

你可以在 react-konva 中使用drawBorder 属性。 Source 或者可以使用属性strokeWidth: 10, stroke: 'lime'

标签： reactjs konvajs react-konva

【解决方案1】：

您必须使用strokeWidth 和stroke 属性设置边框。

<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
/>

【讨论】：