Эквивалент холста quadraticCurveTo в SVG

Я работаю над плагином, позволяющим рисовать «естественные» подписи с помощью мыши или касания. При подтверждении пользователем результатом будет сохраненный SVG, который затем может отображаться вместо кнопки «Click to sign».Эквивалент холста quadraticCurveTo в SVG

В прилагаемом JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ показан тестовый стенд для того, что я пытаюсь сделать. Созданное SVG изображение должно быть близко к исходным путям холста.

enter image description here

Первый DIV содержит canvas, в котором я сделать некоторые из множества сегментов линий (например, контуры). Используя quadraticCurveTo и среднюю точку для контрольной точки, я рисую линии с плавными кривыми. Это прекрасно работает.

Ключевая часть линии рисунка изогнутого является:

$.each(lines, function() { 
    if (this.length > 0) { 
     var lastPoint = this[0]; 
     ctx.moveTo(lastPoint[0], lastPoint[1]); 
     for (var i = 1; i < this.length; i++) { 
      var point = this[i]; 
      var midPoint = [(lastPoint[0] + point[0])/2, (lastPoint[1] + point[1])/2]; 
      ctx.quadraticCurveTo(lastPoint[0], lastPoint[1], midPoint[0], midPoint[1]); 
      lastPoint = point; 
     } 
     // Draw the last line straight 
     ctx.lineTo(lastPoint[0], lastPoint[1]); 
    } 
});

Я попробовал несколько вариантов для SVG поколения тот же выхода, но я озадачен о том, как конвертировать одни и то же множество точек эквивалентного изогнутым линий. Квадратичные Безье требуют «правильных» контрольных точек, но я предпочел бы использовать гораздо более простые средние точки, если это возможно.

Любые идеи? Возможно ли это, или мне придется преобразовать оба варианта для использования Безье с вычисленной контрольной точкой (точками). Есть ли простой способ вычислить контрольные точки, которые будут выполнять ту же работу?

JQuery или сырое JavaScript решение хорошо, но вы должны продемонстрировать в JSFiddle при условии :)

источник

2015-06-23 Gone Coding

Просто любопытно. То, как вы используете квадратичные кривые (с контрольной точкой в середине линии), будет просто создавать прямую линию. Это своего рода поражение точки использования кривой. –

Моя точка зрения верна. Когда контрольная точка находится в точной средней точке двух точек, квадратичная безье будет прямой. Смотрите: http://jsfiddle.net/5bjbu3px/ Однако теперь я вижу, что вы используете разные комбинации в вашей версии холста для того, что вы используете в версии SVG. В версии холста вы просматриваете середину и используете точки массива в качестве контрольных точек. –

Это просто ошибка в коде. Вы не обновляете lastPoint в своей версии SVG.

http://jsfiddle.net/67haj4nt/4/

И если вы обновляете версию SVG, чтобы соответствовать версии холста, вы получаете идентичные кривые.

http://jsfiddle.net/67haj4nt/5/

источник

2015-06-23 14:57:35

Хорошо пятнистый. Должно быть, испортили вырез/пасту. Благодарю. –

Я просто заметил, что SVG не рисует полные строки. Оба конца короче на каждом пути, чем версия холста. Добавление недостающих сегментов. –

После добавления отсутствующих конечных сегментов я замечаю, что строки заканчиваются до конечной точки: http://jsfiddle.net/TrueBlueAussie/67haj4nt/6/ Является ли это функцией SVG (не включая конечный пиксель строк) или является переопределить версию холста? –

Эквивалент холста quadraticCurveTo в SVG

ответ

Смежные вопросы