Côtés incurvés du chemin du triangle?

Question

Je dessine un triangle sur une toile, quelque chose comme:

canvas.moveTo(0, 30); 
canvas.lineTo(40, 0); 
canvas.lineTo(40, 40); 
canvas.lineTo(40, 40); 
canvas.lineTo(0, 30); 

et obtenir triangle bon sur ma toile. Mais j'ai besoin de courber un peu les côtés et de remplir ce chemin avec une couleur spécifique. Quelle est la manière la plus simple de faire ça? Dessiner des arcs? Mais comment remplir l'objet?

Merci!

Answer 1

EDIT: J'ai remarqué que vous utilisiez la toile d'android, pas HTML Canvas, désolé. Le concept est exactement le même sauf que vous appelez quadTo() au lieu de quadraticCurveTo(), donc mon exemple devrait toujours vous mettre en route.

Toujours sur android, vous utilisez canvas.drawPath(path, paint) et passez une peinture dont le Paint.style est défini sur FILL_AND_STROKE.

Vous voulez construire le chemin, fill(), puis stroke() afin d'obtenir à la fois un chemin rempli avec le contour de contour.

Pour obtenir cette forme particulière, le plus simple est de dessiner deux courbes quadratiques. Une courbe quadratique a d'abord besoin d'un point de contrôle x, y puis du point final x, y. Le point de contrôle pour les deux courbes doit se trouver au milieu du triangle souhaité. Voici un exemple:

ctx.fillStyle = "lightgray"; 

ctx.moveTo(0, 100); 
ctx.quadraticCurveTo(50, 50, 50, 0); 
ctx.quadraticCurveTo(50, 50, 100, 100); 
ctx.lineTo(0, 100); 
ctx.fill(); 
ctx.stroke(); 

Here is that example live for you.