Ich habe einige Probleme mit der Skalierung eines Containers auf einen festen Punkt.
In meinem Fall versuche ich eine Stufe auf den Mauszeiger zu skalieren (Zoom).
Hier ist ein Weg, um mit reiner Leinwand zu tun: Ссылка (siehe Zoom Leinwand zu Mauszeiger )
Ich kann einfach nicht herausfinden, wie man dieselbe Logik anwendet, wenn man die KineticJS API benutzt.
Beispielcode:
%Vor%Nach einer Menge Mühe und Suche und Versuch, mit dem Tipp von @Eric Rowell und dem Code in der SO Frage in einen Punkt (mit Skala und übersetzen) Ich habe endlich das Zoomen von einem Fixpunkt mit KineticJS bekommen.
Hier ist eine funktionierende DEMO .
Und hier ist der Code:
%Vor%Sie müssen die Bühne so versetzen, dass der Mittelpunkt am festen Punkt liegt. Hier ein Beispiel, weil der Mittelpunkt der Bühne standardmäßig in der oberen linken Ecke der Leinwand positioniert ist. Nehmen wir an, Ihre Bühne ist 600 Pixel breit und 400 Pixel groß und Sie möchten, dass die Bühne von der Mitte her zoomt. Sie müssten dies tun:
%Vor%aktualisiert @ juan.facorro Demo zur Skalierung der Form statt der Bühne
%Vor%Die obige Demonstration funktioniert nur, wenn die x- und y-Koordinaten der Stufe 0 sind. Wenn z.B. Die Bühne ist ziehbar. Sie ändert diese Koordinaten beim Ziehen, sodass sie in die Versatzberechnung einbezogen werden müssen. Dies kann durch Subtrahieren von den Canvas-Offsets erreicht werden:
%Vor%Tags und Links javascript html5 canvas scaling kineticjs