Konva中的平行线分隔符

Question

我正在尝试为我的道路绘制一条带有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/[email protected]/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将从画布上所有先前的绘图中剪裁您的线条。这意味着它也可能削减背景。要解决此问题，您可以将带有行的组移动到另一个Konva.Layer或仅缓存该组：

group_sep.cache();

注意：每次更改行时，请记住要重新缓存以进行分组。

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