Есть ли способ установить отрицательный / инвертированный цвет как цвет обводки / заливки? - PullRequest
Новая
       7

Есть ли способ установить отрицательный / инвертированный цвет как цвет обводки / заливки?

0 голосов
/ 08 мая 2019

Я рисую замкнутую линию над занятым изображением в качестве фона.Работает нормально.

Но моя цель - максимально подчеркнуть удар.Поэтому я ищу способ сделать цвет обводки линии «отрицательным / инвертированным» пикселем того, что находится под этой линией.

Например: 

<Line ... stroke="inverted" />

Возможно?Достижимы ли по-другому?

1 Ответ

1 голос
/ 08 мая 2019

Вы можете использовать globalCompositionOperation.

Документы Mozilla здесь

Пример Konva здесь - см. Параметры для вызова Konva.Rect (). Пример для текста, поэтому не совсем так, как вам требуется, но, надеюсь, вы сможете адаптировать его к требованию строки.

Я попытался создать фрагмент, чтобы проиллюстрировать это, но не смог получить именно то, что вам нужно. Однако вы можете увидеть, как применить параметр globalCompositionOperation для линии Konva. Измените значение переменной comp на имена других композиционных режимов на странице Mozilla, чтобы увидеть их влияние. Строка перетаскивается.

Альтернативой может быть получение данных пикселей холста, обработка пикселей под линией и инвертирование их по отдельности. 

// This is the color-composition mode
var comp = 'exclusion'

var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 230
});

var layer = new Konva.Layer();
stage.add(layer)


var rect = new Konva.Rect({ x: 10, y: 0, width:500, height: 230, 
          fillLinearGradientStartPoint: { x: -50, y: -50 },
          fillLinearGradientEndPoint: { x: 250, y: 150 },
          fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
})
layer.add(rect)
          
var ln = new Konva.Line({
  points: [25, 70, 300, 20],
  stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round',
  draggable: true,
  globalCompositeOperation: comp
 });

layer.add(ln);
layer.draw()      
stage.draw()
#container {
width: 500px;
height: 230px;
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.5/konva.js"></script>

<div id="container"></div>
...