Je veux dessiner une ovale en toile HTML5, et j'ai trouvé une bonne méthode pour elle dans Stackoverflow .mais j'ai une autre question.
function drawEllipse(ctx, x, y, w, h) {
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.stroke();
}
5 Réponses :
Mon origine n'est pas en mathématiques, donc si je me trompe, je suis sûr que quelqu'un me corrigera, mais de ma compréhension, nous pouvons dessiner une assez bonne Pour répondre à votre question sur la relation entre le point d'ovale et les points de contrôle, je pense qu'il est au mieux de répondre à la surveillance Un problème que nous allons probablement courir dans est que lorsque nous commençons par le haut et faisons un béziercurveto le bas de l'ellipse avec les coins du rectangle (de La même largeur et la même hauteur) que les points de contrôle, la largeur des ellipses va être plus petite que le rectangle. .75 fois la taille que nous voulons. Nous pouvons donc simplement augmenter les points de contrôle en conséquence. Notre point de contrôle X serait ajusté comme (en supposant que la largeur est la largeur de l'ellipse et que nous divisons par deux pour obtenir sa compensation de l'origine) mettre une visualisation où vous pouvez jouer avec la largeur et la hauteur et voir l'ellipse dessinée. L'ellipse rouge est la façon dont nous voulions qu'il soit tiré, avec l'interne comment il serait tiré si nous n'a pas repositionné les points de contrôle. Les lignes illustrent l'algorithme de De Casteljau qui a été montré dans la vidéo. Voici une capture d'écran de la visualisation
Vous trouverez cela expliqué légèrement plus en mathématiques dans http://pomax.github.io/ bezierinfo / # cercles_cubic , mais le gist est qu'utilisant une courbe cubique bézier pendant plus d'un quart de tour n'est généralement pas une bonne idée. Heureusement, utiliser quatre courbes facilite la recherche des points de contrôle requis. Commencez avec un cercle, auquel cas chaque quart de cercle est (1,0) - (1,0.55228) - (0,55228,1) - (0,1) avec des coordonnées à l'échelle de votre ellipse. Dessinez que quatre fois avec +/- Signes échangés pour effectuer un cercle complet, échelle des dimensions pour obtenir votre ellipse et faites.
Si vous utilisez deux courbes, les coordonnées deviennent (1,0) - (1,4 / 3) - (- 1,4 / 3) - (- 1,0), échelonné pour votre ellipse. Il peut toujours sembler assez décent dans votre application, cela dépend un peu de la taille de votre dessin.
Ressource incroyable! Et en effet, vous ne pouvez pas utiliser 2 courbes de Bézier pour dessiner une ellipse. Est-ce que les mathématiques et pour la deuxième dérivée, les équations ne se retrouvent pas bien.
Il peut être prouvé mathématiquement, ce cercle ne peut pas être fabriqué avec une courbe de Bénier de n'importe quel degré. Vous pouvez faire «presque cercle» en l'approchant.
Dites que vous voulez dessiner un quart de cercle autour de [0,0]. Les coordonnées cubes Bézier sont les suivantes: P>
[0 , 1 ] [0.55, 1 ] [1 , 0.55] [1 , 0 ]
Vous n'avez besoin que de deux courbes cubes bézier pour dessiner une ellipse. Voici une version simplifiée du code de Derekr qui utilise les arguments de la fonction d'origine que vous avez fournis - en supposant que vous souhaitez que X et Y soit le centre de l'ellipse:
jsfiddle
grand merci à bkh.
J'ai utilisé son code avec deux courbes de Bézier pour compléter mon dessin ellipse avec n'importe quel angle de rotation. En outre, j'ai créé une comparaison Demo entre les ellipses dessinés par les courbes de Bezier et la fonction native ellipse () (pour l'instant implémenté uniquement en chrome). }