Comment créer une "pointe de pinceau" circulaire dans une application de dessin de canevas HTML5?

Question

J'utilise HTML5 lineTo mais tout trait supérieur à 1 crée des angles au carré sur les lignes (le trait s'étend perpendiculairement au tracé de la ligne que vous dessinez). Je veux créer une pointe de brosse circulaire, similaire à http://muro.deviantart.com.

Des idées?

Answer 1

Les coins peuvent être arrondis en réglant le couvre-ligne.

ctx.lineCap = "round"

Vous pouvez également appliquer une courbe de Bézier à la ligne globale de créer une ligne lisse dans l'ensemble, par, pour chaque point de la ligne P ', ..., P' _{n + 1} , en appliquant l'équation P » k = (k/(n + 1)) P _k-1 + (1- (k/(n + 1))) P k [NB: Vous pourrait faire bien pour sélectionner les points auxquels vous appliquez le lissage de la courbe de bezier en définissant un seuil, peut-être sur l'angle entre P _n et P _{n + 1}]

La combinaison de ces deux techniques avec un flou standard boîte à la ligne elle-même vous donnera une ligne qui apparaît beaucoup plus lisse.

Modifier

D'après ce que je peux dire, il y a en fait un certain nombre de façons de le faire - que vous utilisez est entièrement à vous. Je vais vous donner un exemple, et vous laisser décider: Supposons que vous avez un chemin tracé à partir d'un point de départ p _m (mousedown) à un point final (mouseup) p _n. Ce chemin est composé de sous-chemins (les points joints par des mitres). Nous pouvons dessiner le chemin du contexte de p0 à p1 avec lineTo() et stroke() comme d'habitude. Juste à partir de la sortie de la console, les points auxquels les sous-chemins se rejoignent sont le tir de l'événement mousemove. Notez ces points dans l'ordre dans un tableau.

Bien sûr, si nous dessinons cela dans le contexte principal, nous avons un problème pour le supprimer, donc cela devrait être fait dans un contexte tampon (un élément canvas supplémentaire, par exemple). Le tampon est effacé et nous utilisons les points des mitres pour calculer la courbe. bezierCurveTo imprime une fonction cubique (B (t) = (1-t) P 3 (1-t) P 3 (1-t) t P + t P , t ∈ [0,1]. Etape par votre réseau (penser par boucle) recalculer la ligne avec les points, la mise à jour de la courbe P à P n-3 (Effectuez un calcul de tête rapide, vous devrez peut-être réfléchir à ce point de terminaison, tout dépend de l'équation d'arc utilisée)

Alors laissez-moi voir si je peux faire quelque chose avec ça ... Je ne suis pas en train de le tester alors je vous garantis un buggy.

// 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(); 
} 

Encore une fois, voici ce que je vois - quelqu'un d'autre peut avoir un tout autre et je suis sûr une meilleure interprétation.J'essaie de déchirer des morceaux de choses que j'ai faites et de les mettre ensemble avec un nouveau code rapidement pour vous donner une idée.