Konva JS Crop работает как трансформатор
Как сделать так, чтобы обрезка в конвайсе работала как Transformer
что я имею в виду:
активировать какой-либо флажок, чтобы установить его на кадре
выберите элемент (изображение) на холсте, он должен показать окно, размер которого можно изменить, только измененное положение этого элемента
чем нажатие на кнопку делает кадрирование
я не могу пройти через 2-ю точку отдых довольно легко
спасибо за каждый ответ
Ответы 1
Это широкий вопрос, поэтому вот общий ответ, сфокусированный на подходе к каждому этапу.
Форма Konva Rect может использоваться для обозначения рамки обрезки. Это будет прозрачная заливка, нарисованная поверх изображения. Фигуру Konva Rect можно было бы перетаскивать с помощью функции перетаскивания, которая ограничивает положение x, y, чтобы ее нельзя было перетащить за край изображения (т. Е. Чтобы она всегда находилась внутри или упиралась в край изображения, никогда не перекрывая край). Исходный размер и форма прямоугольника могут соответствовать любым ограничениям, которые вы накладываете, или текущему размеру и форме изображения.
В каждом углу и с каждой стороны рамки обрезки создайте ручки с другими формами Konva Rect. Каждый из них можно перетаскивать с помощью функции перетаскивания, которая ограничивает положение перетаскивания осью и соединенными краями, а также границами изображения и минимальным размером рамки обрезки. Функция перетаскивания также может использоваться для обновления положения / размера рамки обрезки, чтобы края соответствовали положению ручки.
Затем вы можете использовать положение / размер рамки обрезки, чтобы определить, где обрезать изображение.
Для дополнительной обратной связи с пользователем вы также можете применить фильтр внутри или снаружи рамки обрезки, чтобы затемнить, осветлить или затемнить то, что обрезается, с помощью полупрозрачного прямоугольника или одного из фильтров. В качестве альтернативы вы можете использовать функцию обрезки. https://konvajs.github.io/docs/clipping/Clipping_Regions.html