CODEWITHSUNDEEP
konvajs
waliurjs
waliurjs

Reputation: 172

Is there a way to set negative/Inverted color as stroke/fill color

I'm drawing a closed line over a busy image as a background. It's working fine.

But my goal is to highlight the stroke as much as possible. Therefore, I'm looking for a way to make the line's stroke color 'negative/inverted' pixel of what's underneath that line.

For example:

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

Possible? Achievable in some other way?

Upvotes: 0

Views: 436

Answers (1)

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

You may be able to use the globalCompositionOperation.

Mozilla docs here

Konva example here - see the parameters for the Konva.Rect() call. The example is for text, so not exactly as you require but hopefully you can adapt for the line requirement.

I tried to create a snippet to illustrate this but could not get exactly what you require. However, you can see how to apply the globalCompositionOperation parameter for a Konva line. Change the value of the comp variable to the other composition mode names from the Mozilla page to see their effects. The line is draggable.

An alternative may be to get the canvas pixel data, work out the pixels under the line and invert them individually.

// 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>

Upvotes: 2

Related Questions