Как создать круговой «кончик кисти» в приложении для рисования на холсте HTML5? - PullRequest
Новая
       10

Как создать круговой «кончик кисти» в приложении для рисования на холсте HTML5?

1 голос
/ 13 августа 2011

Я использую HTML5 lineTo, но любой обводки больше 1 создает квадратные углы на линиях (обводка проходит перпендикулярно пути нарисованной линии).Я хочу создать кончик кисти, похожий на http://muro.deviantart.com.

Есть идеи?

1 Ответ

3 голосов
/ 13 августа 2011

Углы можно округлить, установив верхний предел.

ctx.lineCap = "round"

Вы также можете применить кривую Безье к общей линии, чтобы создать более гладкую общую линию, например, длякаждая точка в линии P ' 0 ,…, P' n + 1 , применяя уравнение P ' k = (k / (n + 1)) P k-1 + (1- (k / (n + 1))) P k [NB: Вы могли бы хорошо выбрать, какие точки, к которым выприменить сглаживание кривой Безье, установив порог, возможно, на угол между P n и P n + 1 ]

Объединение этих двух методовсо стандартной размытой рамкой к самой линии вы получите гораздо более плавную линию.

Редактировать

Из того, что я могу сказать, на самом деле есть несколько способовсделать это - что вы используете, полностью зависит от вас.Я приведу пример и позволю вам решить: предположим, у вас есть путь, начертанный от начальной точки p m (mousedown) до конечной точки (mouseup) p n .Этот путь состоит из подпутей (точек, соединенных митратами).Мы можем нарисовать путь к контексту от p0 до p1 с помощью lineTo () и stroke () как обычно.Просто от просмотра вывода консоли, точки, в которых соединяются подпути, запускают событие mousemove.Запишите эти точки по порядку в массиве.

Конечно, если мы рисуем это в главном контексте, у нас есть проблема с его удалением, так что это должно быть сделано с буферным контекстом (например, с дополнительным элементом canvas).).Буфер очищается, и мы используем точки митров для расчета кривой.bezierCurveTo печатает кубическую функцию (B (t) = (1-t) 3 P 0 + 3 (1-t) 2 P 1 + 3 (1-т) т 2 P 2 + t 3 P 3 , t ∈ [0,1]. Пройдите по вашему массиву (подумайте о цикле), пересчитав линию с этими точками, обновив кривую с P 0 до P n-3 . (Выполняя быстрые математические вычисления. Вывозможно, нужно подумать над этой конечной точкой. Все это зависит от того, какое уравнение дуги вы используете).

Итак, давайте посмотрим, смогу ли я что-то сделать с этим ... Я не проверяю это, поэтому я гарантируюнеопрятность. 

// Assume:
// bfr = buffer context.
// ctx = main context.
// md = boolean value for mousedown
// pts = []; <-- already contains lp (below) at pts[0];
// We've also recorded Pm in associative array lp [last point]
// Draw is fired on mousemove. Mousemove records a current point in associative array cp
draw = function() {
  if(md) {
      bfr.beginPath();
      bfr.moveTo(lp.x-.5, lp.y-.5);
      bfr.lineTo(cp.x-.5, cp.y-.5);
      pts.push({cp.x, cp.y});
      bfr.stroke();
  }
}

// Optionally, you could make this function recursive.
// This assumes that you want to estimate the curve based on the whole line.
bezier = function(pts) {
  ctx.beginPath();
  ctx.moveTo(pts[0].x, pts[0].y);
  for( var i = 0; i < pts.length - 3; i++ ) {
    ctx.bezierCurveTo( pts[i+1].x, pts[i+1].y, pts[i+2].x, pts[i+2].y, pts[i+3].x, pts[i+3].y);
  }
  ctx.stroke();
}

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

...