Jak określić bieżącą transformację, która jest stosowana przez kanwę HTML5.Transformacja prądu stosowana przez płótno
Wygląda na to, że obsługuje tylko dwie metody radzenia sobie z transformacjami "transform", "setTransform", ale nie mogę odkryć wyników zastosowania transformacji.
Skoro nie śledzę ich wszystkich i nie powielam matematyki macierzowej, którą trzeba wykonywać natywnie, jak mogę obliczyć aktualną transformację?
Możesz zajrzeć tutaj funkcji, które wpływają na transformację:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations
W przypadku korzystania z funkcji setTransform, wówczas prąd macierzą transformacji jest ustawiony na matrycy tożsamości, to wykorzystuje to, co zostało ustawione.
W tym momencie macie bieżącą macierz przekształceń.
Teraz, jeśli masz zamiar zresetować, a następnie rozpocząć wywoływanie innych metod transformacji, jeśli chcesz wiedzieć, co to jest, łatwo jest matematyki, aby obliczyć macierz transformacji, więc po prostu wykonaj operacje , używając własnych funkcji transformacji, możesz ustawić transformację, tak jak ją obliczyłeś.
Jeśli nie możesz tego zrobić, masz teraz szczęście, ale ten post ma ten sam problem, więc możesz poprosić o dodanie nowej funkcji, getTransform.
Zrobiłem owijkę, która dodaje tę metodę na płótno.
http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html
Chociaż nie jest to rozwiązanie dla jak uzyskać prąd przekształcać, może być użyteczny fakt, że konteksty obejmują save() a przywrócić() funkcję, która może być używana do pchania i kontekst kontekstu pop, w tym bieżącą macierz transformacji.
(Przynajmniej może korzystać ci, którzy, podobnie jak ja, szukaliśmy getTransform w celu realizacji stos używając go ...)
IME z transformacjami matrycowymi w CoreAnimation/Quartz na iOS, to tradycyjne rozwiązanie tego problemu; nie martw się, czym jest transformacja _actual_, tylko zapisz, przekształć, wykonuj swoją pracę i przywróć. Niech reszta stosu sama się o siebie zatroszczy. –
konteksty Firefoksa Canvas 2D mają (niestandardowa) i mozCurrentTransform mozCurrentTransformWersja właściwości.
W WhatWG zdefiniowano teraz właściwości currentTransform i currentTransformInverse (pierwsza z nich jest nawet zapisywalna). Oto odpowiednia część specyfikacji:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations
Jednak te prawdopodobnie nie będą powszechnie wdrażane w przeglądarkach jeszcze przez jakiś czas, więc jeśli chcesz przenoszenia trzeba będzie spadać z powrotem do ręcznego śledzenia macierz jako @Dave i @James mówią.
Wydaje się, że każdy człowiek i jego pies napisał takie płótno-macierz transformacji-matrycy. Właśnie rzuciłem okiem na @Dave Lawrence; Myślę, że moja jest lepsza na kilka sposobów, chociaż jestem pewna, że pod wieloma względami jest gorsza.
Działa w najnowszych przeglądarkach Chrome i Firefox, ale nie testowałem jeszcze tego w IE.
kładę kopalnię w jsfiddle, z prostym demonstracji: http://jsfiddle.net/XmYqL/1/
o to blok kodu udobruchać stackoverflow więc pozwala mi link do jsfiddle (??):
code, code, wonderful code
I końcu się do przesyłania mój PolyFill do GitHub:
https://github.com/supermattydomain/canvas.currentTransform.js
wiem, że to nie jest doskonały, ale bardzo chciałbym, abyśmy wszyscy razem pracowali nad wdrożeniem One True Solution dla tego problemu. Nie obchodzi mnie, czy to moje, czy cudze. Ten kąt JavaScript/HTML5/Canvas jest zbyt podobny do Bałkanów: morze częściowych rozwiązań. Proszę, wszyscy, rozwidlenie kopalni, dodajcie swoje zmiany i wyślijcie mi prośby o odciąganie lub wyślijcie mi swój adres URL, abym mógł scalić twój kod lub zastąpić mój hurt hurtem swoim, czy czymkolwiek. To jest głupi problem, który chcę tylko przybić. Jeśli będziemy współpracować, możemy to zrobić.
dzięki. Dokładnie to robiłem, po prostu domyśliłem się, że robią to natywnie, a ja wykonuję operacje po prostu wykonuję pracę za darmo. –