Здравствуйте. Мне нужно сделать UI, в котором на картинке (загруженной извне)

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

canvas и объекты с абсолютным расположением

// Получаем элементы DOM const canvas = document.getElementById('canvas'); const deleteButton = document.getElementById('delete-button'); const ctx = canvas.getContext('2d'); // Инициализируем Fabric.js холст const canvasObj = new fabric.Canvas('canvas'); // Массив для хранения точек const points = []; // Функция для создания новой точки function createPoint(x, y) { const circle = new fabric.Circle({ left: x, top: y, radius: 5, fill: 'red', selectable: true, hasControls: false, // Отключаем ресайз и поворот для точек }); // Добавляем точку на холст и в массив canvasObj.add(circle); points.push(circle); } // Обработчик клика по холсту для создания точек canvas.addEventListener('click', (event) => { const { offsetX, offsetY } = event; createPoint(offsetX, offsetY); }); // Обработчик клика по кнопке для удаления выбранных точек deleteButton.addEventListener('click', () => { const selectedPoints = canvasObj.getActiveObjects(); selectedPoints.forEach((point) => { // Удаляем точку с холста и из массива canvasObj.remove(point); const index = points.indexOf(point); if (index !== -1) { points.splice(index, 1); } }); canvasObj.discardActiveObject(); canvasObj.requestRenderAll(); }); // Обработчик перемещения точек (Drag and Drop) canvasObj.on('object:moving', (event) => { // Обновляем координаты точки в массиве const movedPoint = event.target; const index = points.indexOf(movedPoint); if (index !== -1) { points[index] = movedPoint; } }); // Ваши другие процедуры могут использовать массив points для доступа к координатам точек

так ??

Т.е. библиотека fabric.js

а какая нужна ??

это просто пример кода

причем тут библиотека.

Сойдёт и эта наверное. Я вообще хз с какой стороны к задаче подойти, а тут и библиотека есть

// Инициализируем Fabric.js холст const canvasObj = new fabric.Canvas('canvas'); если вы за это, то назвать файл джс можем как угодно.

http://fabricjs.com/

отлично.

главное решение задачи.

библиотек множество. думаю не должно быть препятствием

👍🏻

Кстати, мне нужны координаты не канваса, а изображения на нём

Если кому интересно, то для моей задачи, кажется, очень подходит ImageLayer из библиотеки OpenLayers. Там всё готово, всё по делу без всякой ерунды. https://openlayers.org/en/latest/examples/static-image.html

👍🏻

Не копируете ответы с gpt

а что так?

человеку нужна была помощь

как вы решаете подобные задачи ??

вы не пользуетесь вообще ии ??

не православное это дело вхвххвхв

они бесполезны на самом деле в средних и сложных задачах, все те задачи которые я скормил ии, в итоге мне пришлось их решать самому

В том что бездумно копировать смысла нету и только хуже для людей которым отвечают так как может запутать ещё дальше

Друг друга а не машин

ну так машина тоже учится

в случае гпт, деградирует

думаю что нет, выдает мне годные ответы и учебу

я проверял

Откуда вы знаете что они годные?

Как?

зачастую он просто ответы в лоб выдает

я беру ютуб , мне разъясняет чат ии

Это не ответ на вопрос

из ответов чата ии мне синтез речи рассказывает

Сейм, я в гтп чаще спрашиваю чем в гугле + отдаю ему писать какие-нибудь функции банально потому, что иногда быстрее промтп написать и код проверить, чем самому всё писать Гпт это не панацея, а инструмент, которым нужно уметь пользоваться, вот и всё

а какой вы ответ хотите ??

На поставленный вопрос?

👍🏻

в гугле профи говорят искать долго и нудно, чем в чате ии

ответил

Гпт это не панацея, а инструмент, которым нужно уметь пользоваться, вот и всё => вот вот

проверял

да

Каким образом?

добавил вас в контакты сейчас я

проект работает

я с Кириллом согласен

скажите у вас чат ии выдавал неправильные ответы или вводил в заблужение ??

Да, бывает

у меня редко

Я бы даже перефразирывал в выдаёт ли правильные ответы и ответ был ты таким же :)