Я работаю над проектом, который требует, чтобы конечные пользователи могли рисовать в браузере так же, как svg-edit и отправлять SVG-данные в сервер для обработки.
Я начал играть с Raphael, и это кажется многообещающим.
В настоящее время я пытаюсь реализовать инструмент типа "карандаш" или "свободный". В основном я просто рисую новый путь, основанный на проценте движения мыши в области рисования. Однако, в конце концов, это создаст огромное количество путей для решения.
Можно ли сократить путь SVG путем преобразования движения мыши для использования Кривые и линейные пути вместо линии сегменты?
Ниже представлен код проекта, который я взбивал, чтобы выполнить задание...
// Drawing area size const
var SVG_WIDTH = 620;
var SVG_HEIGHT = 420;
// Compute movement required for new line
var xMove = Math.round(SVG_WIDTH * .01);
var yMove = Math.round(SVG_HEIGHT * .01);
// Min must be 1
var X_MOVE = xMove ? xMove : 1;
var Y_MOVE = yMove ? yMove : 1;
// Coords
var start, end, coords = null;
var paperOffset = null;
var mouseDown = false;
// Get drawing area coords
function toDrawCoords(coords) {
return {
x: coords.clientX - paperOffset.left,
y: coords.clientY - paperOffset.top
};
}
$(document).ready(function() {
// Get area offset
paperOffset = $("#paper").offset();
paperOffset.left = Math.round(paperOffset.left);
paperOffset.top = Math.round(paperOffset.top);
// Init area
var paper = Raphael("paper", 620, 420);
// Create draw area
var drawArea = paper.rect(0, 0, 619, 419, 10)
drawArea.attr({fill: "#666"});
// EVENTS
drawArea.mousedown(function (event) {
mouseDown = true;
start = toDrawCoords(event);
$("#startCoords").text("Start coords: " + $.dump(start));
});
drawArea.mouseup(function (event) {
mouseDown = false;
end = toDrawCoords(event);
$("#endCoords").text("End coords: " + $.dump(end));
buildJSON(paper);
});
drawArea.mousemove(function (event) {
coords = toDrawCoords(event);
$("#paperCoords").text("Paper coords: " + $.dump(coords));
// if down and we've at least moved min percentage requirments
if (mouseDown) {
var xMovement = Math.abs(start.x - coords.x);
var yMovement = Math.abs(start.y - coords.y);
if (xMovement > X_MOVE || yMovement > Y_MOVE) {
paper.path("M{0} {1}L{2} {3}", start.x, start.y, coords.x, coords.y);
start = coords;
}
}
});
});
Посмотрите на алгоритм Дугласа-Пьюкера, чтобы упростить вашу линию.
Я не знаю какой-либо javascript-реализации (хотя googling направил меня на форумы для разработчиков Google Maps), но вот реализация tcl, которую достаточно легко понять: http://wiki.tcl.tk/27610
И вот статья в Википедии, объясняющая алгоритм (вместе с псевдокодом): http://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm
Вот инструмент рисования, который работает с iPhone или мышью http://irunmywebsite.com/raphael/drawtool2.php Однако также посмотрите на Daves "игровая утилита" @ http://irunmywebsite.com/raphael/raphaelsource.php, который генерирует данные пути при рисовании.
Я работаю над чем-то похожим. Я нашел способ постепенного добавления команд пути путем небольшого обхода API Raphael, как описано в моем ответе здесь. В современных браузерах, которые я тестировал, это работает достаточно хорошо, но степень, в которой ваши строки выглядят гладкими, зависит от того, насколько быстро может работать обработчик mousemove.
Вы можете попробовать мой метод для рисования путей с использованием сегментов линии, а затем выполнить сглаживание после того, как вырисовывается исходный зубчатый путь (или как-нибудь), обрезая координаты с помощью Ramer-Douglas-Peucker по предложению slebetman и преобразуя оставшиеся L для команд кривой SVG.
У меня проблема simillar, я рисую с помощью мыши и команды M. Затем я сохраняю этот путь к базе данных на сервере. Вопрос, который у меня есть, - это разрешение. У меня есть фоновое изображение, в котором пользователи рисуют линии и фигуры над частями изображения, но если изображение отображается на одном разрешении, и пути создаются в этом разрешении, а затем снова открываются на другом, возможно, более низком разрешении, мои пути меняются и не правильно. Я предполагаю, что я спрашиваю: есть ли способ нарисовать путь по изображению и убедиться, что независимо от размера основного изображения путь остается правдоподобным.