是否可以使用Konva.js来实现Paint Bucket？

Question

我设法使用konva实现了多种工具，这些工具允许用户绘制不同的形状和图案，例如：矩形，圆形，箭头，自由绘制，橡皮擦等。 c。

我正在尝试实现以下目标：使用油漆桶，如果在该形状上绘制了其他形状或图案，则用户应该能够填充该形状的不同部分。

也许这个用例有助于更好地理解我的问题：

1. 用户画一个圆。
2. 然后，他在该圆上绘制线，因此将被分成多个区域。
3. 用户现在使用油漆桶，并尝试仅填充该圆圈的区域。

我想知道使用konva能否实现此功能。

直到现在，我只能填充整个形状，类似于this。

更新

为上述用例添加了图像。

1＆2。用户在其上绘制一个圆和线：

1. 使用油漆桶用户可以填充该圆圈的某些区域：

任何反馈都将非常受欢迎。

Answer 1

除非konva有我不知道的特定实现，否则这更多是算法问题。

如果决定自己实施，可以采用的一种方法是像细胞自动机。您可以在中间的某个位置创建一个像素，该像素会随着时间的推移而增长（当然，您无需显示增长情况）。规则是，如果指定颜色的任何像素与原始点（单击以填充颜色的位置）周围的像素的平均颜色相同，则必须将其周围的任何像素着色。

希望这会有所帮助：）

Answer 2

坏消息：Konvajs无法完成您想要的操作，因为它旨在用于矢量图像。每个图形都是由一个方程式整体创建的，并且与其他图形“分离”（因为下面的代码段中的线X和Y和圆是分开的。它不是栅格图层。在矢量中创建油漆桶工具图形很难。

（请参见好消息！）

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 circle = new Konva.Circle({
  x: 180,
  y: 120,
  radius: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});
var lineX = new Konva.Line({
  x: 180, // 180-50
  y: 120,
  points: [-100, 0, 100, 0],
  stroke: 'black',
  strokeWidth: 4
});
var lineY = new Konva.Line({
  x: 180, // 180-50
  y: 120,
  points: [0, -100, 0, 100],
  stroke: 'black',
  strokeWidth: 4
});

circle.on('click', function() {
  var fill = this.fill() == 'red' ? '#00d00f' : 'red';
  this.fill(fill);
  layer.draw();
});

layer.add(circle);
layer.add(lineX);
layer.add(lineY);
stage.add(layer);

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

<script src="https://unpkg.com/konva@3.2.6/konva.min.js"></script>
<div id="container"></div>

好消息：但是，您可以使用Canvas，HTML5和Javascript来做到这一点。

您在这里有一个不错的教程，其中包括一个 DEMO （位于页面顶部）和SOURCE CODE至Create a Paint Bucket Tool in HTML5 and JavaScript

希望这对您有帮助！

Answer 3

我想出了一个解决方案：https://codesandbox.io/s/stupefied-northcutt-1y0cg。

简而言之，此解决方案的作用是在安装舞台时，将油漆桶设置为针对konva生成的画布。根据Antoni的建议，使用单元格自动算法对一键单击周围的像素进行着色。

好的，但是这种方法的缺点是，每当在使用油漆桶后绘制形状时，油漆桶的更改都会丢失，因为（我认为）render()现在不再涉及“香草”在setupPaintBucket()中进行的更改。

此方法的另一个缺点是画布很模糊。

来源：

1. 画圆，箭头和自由手：https://codesandbox.io/s/43wzzv0l37

2. Vanilla Paint程序：https://codepen.io/falldowngoboone/pen/zxRXjL