Konva 中的平行线分隔符

Question

我正在尝试用 2 条线为我的道路绘制分隔符。我已经尝试过只用 2 条平行线来制作它，但是当我制作我的道路曲线时，它看起来不太好。像这样：

小曲线：

大曲线：

因为它现在我只是在黑色背景线后面画一条白色背景线。但有时我的主路并不黑。如何使这些线之间的 space 透明？

示例：

正常工作：

处理不同背景的道路：

您可以在下面的示例中拖动分隔符

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
});
var layer = new Konva.Layer();
var line = new Konva.Line({
    points: [100, 100, 200, 200],
    strokeWidth: 100,
    stroke: 'black',
    draggable: true,

});

var line_2 = new Konva.Line({
    points: [400, 100, 500, 200],
    strokeWidth: 100,
    stroke: 'red',
    draggable: true,
});
const group_sep = new Konva.Group({
    draggable: true,
});
var sep_1 = new Konva.Line({
    points: [100, 100, 200, 200],
    strokeWidth: 20,
    stroke: 'green',
});

var sep_2 = new Konva.Line({
    points: [100, 100, 200, 200],
    strokeWidth: 10,
    stroke: '#000000',

});

group_sep.add(sep_1);
group_sep.add(sep_2);
layer.add(line);
layer.add(line_2);
layer.add(group_sep);
stage.add(layer);
layer.draw();

<script src="https://unpkg.com/konva@4.0.16/konva.min.js"></script>
<div id="container"></div>

Answer 1

您可以使用 blend mode 通过 globalCompositeOperation 到 "cut" 一行。

const group_sep = new Konva.Group({
    draggable: true,
});
var sep_1 = new Konva.Line({
    points: [100, 100, 200, 200],
    strokeWidth: 20,
    stroke: 'green',
});

// destination-out will cut line from previous drawings
var sep_2 = new Konva.Line({
    points: [100, 100, 200, 200],
    strokeWidth: 10,
    stroke: '#000000',
    globalCompositeOperation: 'destination-out'
});

但是您应该知道 destination-out 会从 canvas 上的所有先前绘图中删除您的线条。这意味着它也可以剪切背景。要解决这些问题，您可以将带有行的组移动到另一个 Konva.Layer 或仅缓存该组：

group_sep.cache();

注意：每次改行记得重新缓存到分组

演示：https://jsbin.com/ravodomigi/3/edit?html,js,output

Konva 中的平行线分隔符

Parallel lines separator in Konva

javascript

canvas

konvajs