Question

我正在将繁忙的图像绘制为背景的封闭线。一切正常。

但是我的目标是尽可能地突出笔画。因此，我正在寻找一种使线条的笔触颜色为该线条下方内容的“负/反转”像素的方法。

例如：

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

可能吗？可以通过其他方式实现吗？

Answer 1

您也许可以使用globalCompositionOperation。

Mozilla文档here

Konva示例here-请参见Konva.Rect（）调用的参数。该示例是针对文本的，因此不完全符合您的要求，但希望您可以适应行要求。

我试图创建一个片段来说明这一点，但无法完全满足您的要求。但是，您可以看到如何为Konva线应用globalCompositionOperation参数。从Mozilla页面将comp变量的值更改为其他合成模式名称，以查看其效果。这条线是可拖动的。

另一种选择是获取画布像素数据，计算出线下的像素，然后分别对其进行反转。

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

有没有一种方法可以将负色/反转色设置为描边/填充色

1 个答案: