如何使用 react-konva 制作圆角垂直线?
How to make rounded-perpendicular lines with react-konva?
我需要用 react-konva 制作圆角垂直线,使用现有的 APIs 可以实现吗?如果是,如何?
我对 class 行使用了贝塞尔曲线 API,效果很好。不知何故,现在我需要将贝塞尔曲线修改为圆角垂直线。
像这样:
您可以通过多种方式实现它。您可以使用 tension to create curved lines or use 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}
/>
);
};
我需要用 react-konva 制作圆角垂直线,使用现有的 APIs 可以实现吗?如果是,如何?
我对 class 行使用了贝塞尔曲线 API,效果很好。不知何故,现在我需要将贝塞尔曲线修改为圆角垂直线。
像这样:
您可以通过多种方式实现它。您可以使用 tension to create curved lines or use 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}
/>
);
};