Можно ли реализовать Paint Bucket, используя Konva.js? - PullRequest
Новая
       51

Можно ли реализовать Paint Bucket, используя Konva.js?

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

Мне удалось реализовать, используя konva , несколько инструментов, которые позволяют пользователям рисовать различные формы и узоры, такие как: прямоугольник, круг, стрелки, свободное рисование, ластик и так далее.c.

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

Может быть, этот вариант использования помогает лучше понять мой вопрос:

  1. Пользователь рисует круг.
  2. После этого он рисует линии над этим кругом, чтобы разделить их на несколько областей.
  3. Пользователь теперь использует ведро с краской и пытается заполнить только области этого круга.

Мне интересно, возможно ли использование этой функции с помощью konva.

До сих пор мне удавалось заполнять только целые фигуры, подобно this .

Обновление

Добавлены изображения для приведенного выше варианта использования.

1 & 2. Пользователь рисует круг и линии над ним: enter image description here

Используя ведро с краской, пользователь может заполнить определенные области этого круга: enter image description here

Любая обратная связь будет приветствоваться.

Ответы [ 3 ]

2 голосов
/ 26 мая 2019

Плохие новости: То, что вы хотите, не может быть сделано с 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 до Создание инструмента Bucket Paint в HTML5 и JavaScript

Надеюсь, это поможет вам!

2 голосов
/ 23 мая 2019

Если у konva нет конкретной реализации, о которой я не знаю, это скорее алгоритмическая проблема.

Один из подходов, который вы можете использовать, если решите реализовать его самостоятельно, - это что-то вроде автомата клетки. Вы должны создать один пиксель где-то посередине, и он будет расти со временем (конечно, вам не нужно показывать рост). Согласно правилам, любой пиксель указанного цвета должен окрасить любой пиксель вокруг него, если он совпадает со средним цветом пикселей вокруг исходной точки (там, где вы щелкнули, чтобы залить цвет).

Надеюсь, это поможет:)

0 голосов
/ 10 июня 2019

Я нашел решение: https://codesandbox.io/s/stupefied-northcutt-1y0cg.

Короче говоря, это решение заключается в том, что при установке сцены ведро с краской настраивается на холст, сгенерированный konva. Пиксели вокруг одного щелчка окрашены с использованием алгоритма клеточного автомата, согласно предложению Антони.

Хорошо, но недостатком этого подхода является то, что всякий раз, когда вы рисуете фигуру после того, как ведро с краской используется, изменения ведра с краской теряются, потому что (я предполагаю) render() теперь не касается "ванильных" изменений сделано в setupPaintBucket().

Другим недостатком этого подхода является то, что холст размыт.

Источники

  1. Нарисуйте круг, стрелку и свободную руку: https://codesandbox.io/s/43wzzv0l37

  2. Программа покраски ванили: https://codepen.io/falldowngoboone/pen/zxRXjL

...