En HTML5 Canvas, je peux faire à l'axe des y aller vers le haut plutôt que vers le bas?

Je dessine un graphique en Toile et de la difficulté avec le fait que l'axe des y est "en arrière." L'origine est dans le coin en haut à gauche, et l'augmentation des valeurs d'aller vers le bas plutôt que vers le haut.

(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 en bas à gauche de l'écran à l'aide de translate().

context.translate(0, canvas.height);

Et je sais que je peux inverser l'axe y à l'aide de l'échelle().

context.scale(1, -1);

Qui semble fonctionner, sauf qu'il provoque de faire apparaître le texte à l'envers. Est-il un moyen de faire du Canevas coordonne le travail de la façon dont je attendre?

InformationsquelleAutor Patrick McElhaney | 2010-12-02

14

Pour plus modernes de l'installation, vous pouvez utiliser context.transform(1, 0, 0, -1, 0, canvas.height). Cette bascule de l'axe y et déplace l'ensemble de la toile un seul écran.

Plus disponibles sur les transformations:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
- Juste une petite note - vous aurez aussi besoin d'inverser la position du pointeur de la souris événements si vous êtes de la manipulation de la souris logique.
- Tom, comment inverser la position du pointeur de la souris événements?
- Malheureusement, cette méthode semble aussi en feuilletant le texte maintenant.
InformationsquelleAutor user5520124
9

Je pense que vous feriez bien mieux de vous y habituer. L'origine est en haut à gauche avec plus de pixels-vidéo/écran Api.

Voici une discussion sur le sujet.
- C'est assez déroutant mais pour avoir de la boîte englobante où bottom > top.
- ce n'est pas vraiment à confusion, quand vous pensez à ce sujet pendant quelques minutes. C'est en fait beaucoup moins arbitraire que la sagesse acceptée que droit>gauche (ce qui n'est pas vrai dans beaucoup de langues de l'humanité). Le paradigme est que le coin supérieur gauche est connu, et toutes les valeurs de sortir de cela. Ce qui est logique car c'est la seule chose que nous pouvons vraiment compter sur quand quelque chose rend à l'intérieur d'une manière arbitraire de la taille de l'écran ou d'un document.
- Je pense que document est le mot clé ici. Les écrans pourrait aller de toute façon, selon qu'ils sont utilisés pour afficher du texte ou des graphiques Cartésien; mais la raison pour laquelle nous avons souvent l'origine à un haut coin est parce que documents aller de haut en bas, pas de bas en haut, dans presque toutes les langues humaines (de bas en haut est rare). HTML5 canvas en résulte que la convention parce que le HTML est basé sur un concept de document (d'où DOM). Ce n'est pas être basé sur les pixels.
InformationsquelleAutor Skilldrick
5

Parcelle 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>
```
- Ugh. J'ai pris cette approche, mais après un certain temps, après avoir à le faire sur tous appel qui implique une coordonnée y est très fastidieux, source d'erreurs, et inutilement encombré. Je préférerais utiliser les stackoverflow.com/a/33499668/423105
InformationsquelleAutor Rich
0

Il dépend de l'endroit où vous mettez le .l'échelle j'ai juste essayé et ça ne fonctionne pas au premier abord. Vous avez besoin de mettre la .l'échelle entre les moveTo();

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

InformationsquelleAutor brocksprogramming

Vous devez vous connecter pour publier un commentaire.