HTML5 Canvas - неожиданный эффект с квадратичными кривыми - PullRequest
Новая
       35

HTML5 Canvas - неожиданный эффект с квадратичными кривыми

2 голосов
/ 28 декабря 2011

В последнее время я работаю над приложением для рисования, просто ради удовольствия.После многих попыток нарисовать плавные кривые с помощью точек выборки, заданных мышью, я согласился на что-то, используя Quadratic Curve.

Я должен признать, что мое понимание этих кривых не оптимально, но я думаю, что понялкак они работаютЧего я не могу понять, так это того, что когда я рисую кривую, которая идет вверх, а затем внезапно падает, пик кривой больше не округляется (она выглядит сплюснутой).

Демонстрация гораздо лучше понять, чтоЯ говорю о: ссылке на песочницу JCanvas

Если вы удалите последнюю часть кривой (от cx11 до y15): ссылка на другую песочницу JCanvas .Выглядит хорошо, но когда вы добавляете следующую контрольную точку и конечную точку, вы получаете этот странный эффект.

Примечание: я не использую JCanvas, но у него та же ошибка, и песочница удобна.Я предполагаю, что это исходит из координат, которые я получаю, но я не могу объяснить и не могу найти обходной путь / хак, чтобы он выглядел округлым ...

Для тех, кто не может быть обеспокоен с песочницейВот краткая версия координат, которые вызывают проблему:

x1: 216, y1: 98, cx1: 216, cy1: 97, x2: 216, y2: 98, cx2: 216, cy2:99, x3: 215, y2: 103,

Есть идеи, почему?Математические вещи приветствуются.Я немного искал и читал о проблеме, но ничего подобного не нашел.

-

Обновление

Как указал Саймон, я использую Chrome 16, и я протестировал пример с Firefox 4 и последним Safari, и ошибка есть.Я попробовал с Opera, и он выглядит хорошо.

Я довольно расстроен из-за этого, так как ошибка есть и на iPad, и я пытался создать мобильное веб-приложение, так что я немного застрял.

Есть идеи для обхода / взлома?

1 Ответ

1 голос
/ 28 декабря 2011

Найден обходной путь.Это одна из тех глупых ошибок типа «бла-подход-ноль», я не знаю, как их правильно назвать.Сложно закруглить угол, если соединение между двумя точками представляет собой очень крошечную вертикальную линию, и Safari запутывается.

В месте вашей проблемы есть кривая вертикальной линии высотой 1 пиксель, которую необходимо округлить.

Если пункт назначения X идентичен между одной квадратичной кривой и следующей, сафари создаст вам проблемы.Так что это плохо: 

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216, 99, 215, 103); // I have the same X as the previous quadratic
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

См. Здесь: http://jsfiddle.net/Ws6UY/

Так что, если мы просто изменим это значение, самое маленькое количество: 

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216.01, 99, 215, 103); // 216.01 is not the same X as 216!
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

См. Здесь: http://jsfiddle.net/Ws6UY/1/

Как глупо!Все, что вам нужно сделать, чтобы браузеры Safari / iOS работали, это убедиться, что значения x (и, вероятно, y) не совпадают с последней точкой.

...