<p>Присылайте конечную стоимость работы</p><p>ТЗ</p><p>1. Нужно сделать HTML страничку на которой будет элемент CANVAS.</p><p>2. В него должна быть загружена подложка в виде планировки помещения.</p><p>3. На этой картинке должна быть возможность рисовать мышкой по точкам контуры цвет салатовый полупрозрачный (смотрите приложенный скриншот) </p><p>4. Контуры должны замыкаться при клике на первую точку после чего заливаются заливкой чть светлее чем контур</p><p>5. На странице две кнопки одна очищает канвас оставляя только подложку, вторая передает координаты контура в php по средствам ajax</p><p>6. Код нужно разместить в песочнице или на вашем хостинге для теста</p><p>Можно сделать с помощью paper.js или как удобнее!</p><p>GPT генерит такой код:</p><p>Вот обновленный код, который добавляет кнопку "Сохранить" и отправляет координаты многоугольника на сервер с помощью скрипта PHP:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p> <script src="<a href="https://unpkg.com/paper"></script>">https://unpkg.com/paper"></script></a></p><p> <style></p><p> #canvas {</p><p> position: relative;</p><p> border: 1px solid black;</p><p> }</p><p> </style> </p><p></head></p><p><body></p><p> <div id="canvas"></div></p><p> <button onclick="savePolygon()">Сохранить</button></p><p> <script></p><p> // Создаем новый холст Paper.js</p><p> paper.setup('canvas');</p><p> // Добавляем подложку в виде jpg картинки</p><p> var raster = new paper.Raster('path-to-your-image.jpg');</p><p> raster.position = <a href="http://view.center">view.center</a>;</p><p> // Создаем новый слой для рисования многоугольника</p><p> var polygonLayer = new paper.Layer();</p><p> polygonLayer.activate();</p><p> // Массив для хранения точек многоугольника</p><p> var points = ;</p><p> // Функция для создания новой точки при клике на холст</p><p> function createPoint(event) {</p><p> var point = event.point;</p><p> var circle = new <a href="http://paper.Path.Circle">paper.Path.Circle</a>(point, 5);</p><p> circle.fillColor = 'red';</p><p> points.push(point);</p><p> // При нажатии в первую точку, создаем замкнутую фигуру</p><p> if (points.length > 2 && point.equals(points)) {</p><p> var polygon = new paper.Path(points);</p><p> polygon.fillColor = new paper.Color(0, 0, 1, 0.5); // Полупрозрачный синий цвет</p><p> polygon.closed = true;</p><p> points = ;</p><p> }</p><p> }</p><p> // При движении мыши, перемещаем активную фигуру</p><p> function movePolygon(event) {</p><p> var delta = <a href="http://event.delta">event.delta</a>;</p><p> if (polygonLayer.children.length > 0) {</p><p> polygonLayer.children.position.x += delta.x;</p><p> polygonLayer.children.position.y += delta.y;</p><p> }</p><p> }</p><p> // Функция для отправки координат многоугольника на сервер</p><p> function savePolygon() {</p><p> if (polygonLayer.children.length > 0) {</p><p> var polygonPoints = polygonLayer.children.<a href="http://segments.map">segments.map</a>(function(segment) {</p><p> return ;</p><p> });</p><p> // Отправляем данные на сервер с помощью AJAX запроса</p><p> var xhr = new XMLHttpRequest();</p><p> <a href="http://xhr.open">xhr.open</a>('POST', 'save-polygon.php', true);</p><p> xhr.setRequestHeader('Content-Type', 'application/json');</p><p> xhr.onreadystatechange = function() {</p><p> if (xhr.readyState === 4 && xhr.status === 200) {</p><p> console.log('Многоугольник сохранен на сервере');</p><p> }</p><p> };</p><p> xhr.send(JSON.stringify(polygonPoints));</p><p> }</p><p> }</p><p> // Подписываемся на событие клика и движения мыши</p><p> paper.view.on('click', createPoint);</p><p> paper.view.on('mousedrag', movePolygon);</p><p> </script></p><p></body></p><p></html></p><p>Примечания:</p><p>- Замените 'path-to-your-image.jpg' на путь к своей jpg картинке.</p><p>- При клике на холст будут создаваться точки многоугольника.</p><p>- Если кликнуть в первую точку, создастся замкнутая фигура. При этом можно начать рисовать новую фигуру.</p><p>- Координаты многоугольника отправляются на сервер с помощью POST-запроса в формате JSON.</p><p>- Создайте файл save-polygon.php, который будет обрабатывать запрос на сервере и сохранять координаты многоугольника. В этом файле можно использовать переменную $_POST, чтобы получить JSON-строку с данными многоугольника.</p>
