Javascript html canvas paper.js

Веб-программированиеЗакрыт2 заявки162 просмотра
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Присылайте конечную стоимость работы

ТЗ

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-строку с данными многоугольника.

PHPJavascriptHTMLAjax
6 месяцев назад
msoleg2
42 годаКазахстан
16 лет в сервисе
Был
6 месяцев назад
Файлы доступны только авторизованным пользователям