如何用 react-konva 制作圆角垂直线？答案

【问题标题】：How to make rounded-perpendicular lines with react-konva?如何用 react-konva 制作圆角垂直线？
【发布时间】：2019-05-11 23:54:14
【问题描述】：

我需要用 react-konva 制作圆角垂直线，使用现有的 API 可以实现吗？如果是，怎么做？

我在 Line 类中使用了 bezier API，效果很好。不知何故，现在我需要将贝塞尔曲线修改为圆角垂直线。

这样的：

【问题讨论】：

标签： konvajs konvajs-reactjs

【解决方案1】：

有很多方法可以实现它。您可以使用tension 创建曲线或使用lineCap 属性。

但要获得更多控制权，最好创建自定义形状。

const RADIUS = 20;

const Line = ({ points }) => {
  return (
    <Shape
      points={points}
      sceneFunc={(context, shape) => {
        const width = points[1].x - points[0].x;
        const height = points[1].y - points[0].y;
        const dir = Math.sign(height);
        const radius = Math.min(RADIUS, Math.abs(height / 2), Math.abs(width / 2));

        context.beginPath();
        context.moveTo(points[0].x, points[0].y);
        context.lineTo(points[0].x + width / 2 - RADIUS, points[0].y);
        context.quadraticCurveTo(
          points[0].x + width / 2,
          points[0].y,
          points[0].x + width / 2,
          points[0].y + dir * radius
        );
        context.lineTo(points[0].x + width / 2, points[1].y - dir * radius);
        context.quadraticCurveTo(
          points[0].x + width / 2,
          points[1].y,
          points[0].x + width / 2 + radius,
          points[1].y
        );
        context.lineTo(points[1].x, points[1].y);
        context.fillStrokeShape(shape);
      }}
      stroke="black"
      strokeWidth={2}
    />
  );
};

演示：https://codesandbox.io/s/757nw05p6

【讨论】：