HTML5 Canvas (inversé) système de coordonnées
Je suis nouvelle sur la Toile, et je me demande:
- la justification de l'utilisation inversé système de coordonnées cartésiennes.
- Dire, j'ai besoin de tracer certaines valeurs de l'histogramme. Est un moyen facile de faire pivoter/carte un châssis de système de coordonnées cartésiennes.?
Voir stackoverflow.com/questions/2563618/...
pensais que le post vous a montré n'est pas sur la toile, je vais essayer de technique similaire. merci pour le lien
J'ai ajouté mon lien comme une réponse maintenant.
Tout dans le monde du PC a Y l'augmentation de la baisse ...c'est pas juste <canvas>. Les tampons d'images sont construits de cette façon, les affichages sont construits de cette façon, etc...
Maintenez alors le CSS a X et Y à zéro dans le coin supérieur gauche cependant <canvas> seuls Y a zéro dans le coin supérieur gauche cependant X comme le zéro en haut à droite? Un peu bizarre. Peut-être il ya un moyen de changer cela avec un <canvas> variable de contexte?
pensais que le post vous a montré n'est pas sur la toile, je vais essayer de technique similaire. merci pour le lien
J'ai ajouté mon lien comme une réponse maintenant.
Tout dans le monde du PC a Y l'augmentation de la baisse ...c'est pas juste <canvas>. Les tampons d'images sont construits de cette façon, les affichages sont construits de cette façon, etc...
Maintenez alors le CSS a X et Y à zéro dans le coin supérieur gauche cependant <canvas> seuls Y a zéro dans le coin supérieur gauche cependant X comme le zéro en haut à droite? Un peu bizarre. Peut-être il ya un moyen de changer cela avec un <canvas> variable de contexte?
OriginalL'auteur bsr | 2011-04-22
Vous devez vous connecter pour publier un commentaire.
Toiles sont à l'envers car il est intuitif à un grand nombre d'interfaces. Les pages Web sont plus comme une feuille de papier qu'un graphique cartésien, parce que vous commencez en haut à gauche et à lire vers le bas. Par conséquent, le html est prévu comme ça. Je suppose que l'élément canvas utilise le même système de coordonnées de la cohérence.
Vous pouvez le retourner par la mise à l'échelle de l'axe y par -1. Vous pourriez avoir besoin de le transformer ainsi, je ne suis pas sûr à ce sujet, mais il y a un commentaire sur votre question qui devrait vous aider. La transformation de fonctions sont à peu près la même chose en html comme ils le sont dans ce post.
J'utilise le standard html5 projet beaucoup pour la référence. Voici une partie du contenu à partir de la toile contexte 2d section:
La toile du système de coordonnées est inversée par rapport à ce que l'OP s'attend, probablement de travailler en 3D, par exemple, où y souvent (mais pas toujours) des points, ou dans la plupart de lycée et d'université-niveau en mathématiques des classes où l'axe Y positif, de nouveau, vers le haut. Je suppose que l'une ou l'autre pourrait être appelé "inversé", selon d'où vous venez.
Yep, si vous vous référez à d'autres choses (comme la classe de mathématiques), les coordonnées peuvent sembler "inversé". Mais si vous restez dans le monde de l'infographie, il y a aucun inversion. Dans ce cas particulier, l'inférence que la "toile" est inversé par rapport à d'autres types de graphiques d'ordinateur n'est tout simplement pas vrai.
L'orientation du système de coordonnées pour la plupart des applications de l'ordinateur est dérivé de la base de la technologie d'affichage - n'a de sens que pour les données de processus dans la manière et dans l'ordre, il sera affiché. Une plongée dans l'histoire du moniteur vous mèneront à travers les les écrans CRT, histoire de la télévision, et finalement à la norme balayage de trame motif. De gauche à droite, de haut en bas, parce que c'est juste la façon dont nous avons toujours fait.
La Conversion doit se produire si vous utilisez la norme géométrique des formules - par exemple le calcul du point sur la toile avec un certain degré de rotation autour du centre de la toile.
OriginalL'auteur vedosity
De Comment puis-je tirer sur un Composite à l'aide d'un autre quadrant pour les coordonnées?
OriginalL'auteur Jonas
Je suis à sauter de la discussion de ce qui devrait être considéré inversé et non inversé système de coordonnées cartésiennes (c'est quasiment une question de ce contexte, vous de la première rencontre entre le concept et ce que les conventions étaient en vigueur il y a).
Cependant, la raison canvas HTML (et SVG et de nombreux autres systèmes de coordonnées liées à rendu à l'écran) mettre origo dans le coin supérieur gauche est tout simplement parce que les écrans CRT (qui était le dominant d'affichage de l'ordinateur de la technologie) a rendu l'écran de l'ordinateur en laissant un faisceau d'électrons de balayage sur l'écran, ligne par ligne, jusqu'à ce que la totalité de l'écran ont été rendus. Pour tous les Crt j'en ai entendu parler, les lignes de balayage ont été horizontale et ont été rendues, de gauche à droite. Aussi, le plus haut de la ligne de balayage a été rendue, de sorte que le coin supérieur gauche est l'endroit où toutes les actualisations d'écran a commencé. Laisser ce coin être origo, avec X croissant vers le bas et Y l'augmentation de rightwards simplifié les calculs pour une cartographie de l'écran de coordonnées de mémoire vidéo positions (et simplifié les calculs signifiait simplifié de matériel dans les premiers jours de l'affichage de l'ordinateur de contrôleurs). Autant que je sache, les écrans de télévision d'analyse de leurs expositions à la de cette façon, en commençant par le coin supérieur gauche.
(Jeux d'Arcade étaient un peu inventif, à cet égard, quelques-uns d'entre eux ont un "normal" d'ordinateur CRT, et puis il avait tourné de 90 degrés pour obtenir un écran qui sont mieux adaptés à la mise en jeu vidéo produite. Pour les jeux de l'actualisation de l'écran ne démarre pas dans le coin en haut à gauche, pour des raisons évidentes.)
La présente convention à mettre origo en haut à gauche et laissez-X augmentation vers le bas et Y rightwards a coincé depuis les premiers jours et semble être utilisé dans toutes sortes d'informatique graphique contextes.
Mais je suis d'accord, mathématique X/Y graphes sont orientés, en particulier avec X positif vers le haut.
@Franticfantom dit, vous pouvez utiliser les fonctionnalités de transformation du code HTML de Toile API pour faire une échelle de -1 dans la direction Y pour miroir le graphique à l'envers, puis utilisez une traduction pour déplacer origo partir du haut à gauche de là où vous le souhaitez. Être conscient qu'une telle échelle de -1 transformation miroir tout, de sorte que l'application qui à tout texte que vous utilisez dans vos graphiques résultat juste, en miroir ou la tête en bas de texte. Certaines précautions doivent être prises pour "unreverse" tout le texte à la place.
Je suis assez sûr qu'il a la verticale & horizontale échangé tout au long de cette réponse.
La convention pour la plupart des champs de math/science est une droitier (+x -> à droite, +y -> jusqu'), de sorte que la
canvas
(et la plupart des autres systèmes dans le monde de l'informatique), les coordonnées sont en effet "inversé". Mais pas tous - par exemple, Pdf (et de nombreuses applications axées sur les médias imprimés) l'utilisation d'un standard de droite système avec l'origine dans le coin inférieur gauche.OriginalL'auteur IllvilJa