Dans HTML5 Canvas, puis-je faire monter l'axe y plutôt que de le faire descendre?

Je dessine un graphique dans Canvas et je me bats avec le fait que l'axe y est "en arrière". L'origine est dans le coin supérieur gauche, et les valeurs croissantes diminuent plutôt que vers le haut.Dans HTML5 Canvas, puis-je faire monter l'axe y plutôt que de le faire descendre?

(0,0)   (x,0)  (0,y)^
     +-------------->    | 
     |       | 
     | CANVAS     |  INSTEAD 
     | DOES THIS    |  OF THIS 
     |       | 
     |       +-----------------> 
(0,y) v      (0,0)    (x,0)

Je sais que je peux déplacer l'origine dans le coin inférieur gauche en utilisant translate().

context.translate(0, canvas.height);

Et je sais que je peux inverser l'axe des y en utilisant scale().

context.scale(1, -1);

Cela semble fonctionner, sauf que le texte apparaît à l'envers. Y a-t-il un moyen de faire en sorte que les coordonnées de Canvas fonctionnent comme je le souhaite?

Source

2010-12-02 Patrick McElhaney

Pour une configuration plus moderne, vous pouvez utiliser context.transform(1, 0, 0, -1, 0, canvas.height). Ceci retourne l'axe y et déplace l'ensemble de la toile d'un écran.

Plus sur les transformations disponibles: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Source

2015-11-03 12:53:31 user5520124

Juste comme une petite note - vous aurez également besoin d'inverser la position du pointeur pour les événements de la souris si vous manipulez une logique de la souris. –

Tom, comment inversez-vous la position du pointeur pour les événements de la souris? –

Je pense que vous feriez beaucoup mieux de vous y habituer. L'origine est en haut à gauche avec la plupart des API vidéo/écran basées sur les pixels.

Here's a discussion on the subject.

Source

2010-12-02 13:19:45 Skilldrick

Il est assez déroutant mais d'avoir la boîte englobante où 'bas> top'. –

ce n'est pas vraiment déroutant, quand on y pense pendant quelques minutes. En fait, c'est beaucoup moins arbitraire que la sagesse acceptée que la gauche> (ce qui n'est pas vrai dans beaucoup de langues humaines). Le paradigme est que le coin supérieur gauche est connu, et toutes les valeurs sortent de cela. C'est logique parce que c'est la seule chose sur laquelle nous pouvons réellement compter quand quelque chose apparaît dans un écran ou un document de taille arbitraire. – joshstrike

Je pense que * document * est le mot clé ici. Les écrans peuvent aller dans les deux sens, selon qu'ils sont utilisés pour afficher du texte ou des graphiques cartésiens; mais la raison pour laquelle nous avons souvent l'origine dans un coin * supérieur * est parce que ** les documents ** vont de haut en bas, pas de bas en haut, dans presque toutes les langues humaines (de bas en haut est rare). Le canevas HTML5 suit cette convention car HTML est basé sur un concept de document (donc DOM). Il ne s'agit pas d'être basé sur des pixels. – LarsH

Tracé graph_height - y.

par exemple: http://jsfiddle.net/nVUUM/

<canvas></canvas> 

<script> 
var e = document.getElementsByTagName('canvas')[0]; 
var c = e.getContext('2d'); 

function plot(x,y) { 
    c.fillRect(x, e.height-y, 5, 5); 
} 

plot(100,50); 
plot(200,100); 
</script>

Source

2014-01-27 07:24:19 Rich

Pouah. J'ai pris cette approche, mais après un certain temps, avoir à faire cela sur * chaque * appel qui implique une coordonnée y est très fastidieux, sujet aux erreurs, et inutilement encombré. Je préfère utiliser http://stackoverflow.com/a/33499668/423105 – LarsH

Cela dépend de l'endroit où vous mettez le .scale que je viens d'essayer cela et ça ne fonctionnait pas au début. Vous devez mettre le .scale entre le moveTo();

ctx.arc(50,50,50,0,2*Math.PI); ctx.moveTo(50,50); ctx.scale(1,-1); ctx.lineTo(50,100); ctx.stroke();

Source

2017-01-07 21:34:47 brocksprogramming

Dans HTML5 Canvas, puis-je faire monter l'axe y plutôt que de le faire descendre?

Répondre

Questions connexes