Разделитель параллельных линий в Конве - PullRequest
Новая
       48

Разделитель параллельных линий в Конве

1 голос
/ 01 ноября 2019

Я пытаюсь нарисовать разделитель с 2 линиями для моей дороги. Я уже пытался сделать это только с двумя параллельными линиями, но когда я сделал свою кривую дороги, это выглядит не очень хорошо. Как это:

Малая кривая:

enter image description here

Большая кривая:

enter image description here

Из-за этого сейчас я просто рисую одну линию с белым фоном за линией с черным фоном. Но иногда моя главная дорога не черная. Как сделать прозрачным пространство между этими строками?

Примеры:

Обычная работа:

enter image description here

Работа сдорога с другим фоном:

enter image description here

Вы можете перетащить разделитель в приведенном ниже примере 

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>

1 Ответ

2 голосов
/ 04 ноября 2019

Вы можете использовать режим смешивания через 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

...