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