javascript - Konva 中的平行线分隔符

Question

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

小曲线:

大曲线:

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

例子:

正常工作:

处理不同背景的道路:

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

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 从另一行“剪切”一行。

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