Dynamische Größe der Leinwand und ihre Inhalte

Question

Ich bin ein Anfänger in Javascript also bitte mit mir ertragen.

Grundsätzlich mache ich eine Sandbox-Zeicheneinrichtung für eine Website mit Javascript. Und das geschieht mit der Leinwand. Was ich tun muss, ist in der Lage sein, die Leinwand dynamisch zu ändern, aber gleichzeitig alles auf der Leinwand zu skalieren.

Ich glaube nicht, dass diese Frage schon einmal gestellt wurde. Es scheint trivial, aber ich habe derzeit alle meine Objekte auf der Leinwand in absoluten Koordinaten definiert. Ich habe auch Mausereignisse, um Dinge zu zeichnen. Und wenn ich die Leinwand vergrößern möchte (zB durch Verdoppelung der Größe). Alle Objekte im Inneren werden nicht richtig skaliert und das Mauskoordinatensystem wird ebenfalls durcheinander gebracht.

Einzige Lösung, die ich mir vorstellen kann, ist, dass ich ALLE meine Zeichnungsteile um einen Maßstabsfaktor ergänze, aber das ist sehr schwierig mit viel Code. Gibt es einen besseren Weg?

Answer 1

Wenn es Ihnen nichts ausmacht, Jaggies auf Ihren zweidimensionalen Zeichnungen zu verwenden, können Sie CSS einfach verwenden, um die Größe der Leinwand zu verdoppeln. Dann teilen Sie jede eingehende mouseevent koordiniert 2.

Wenn Sie jaggies auf doppelt so große Leinwand nicht wollen, dann:

• doppelte Größe der Leinwand Element: canvas.width*=2 und canvas.height*=2 Diese automatisch löschen alle Leinwand Inhalt.
• Vergrößern Sie die Leinwand: context.scale(2,2)
• Zeichnen Sie alle Zeichnungsteile unter Verwendung der unveränderten ursprünglichen Koordinaten neu. Ein glücklicher Hinweis: Sie müssen keine Ihrer Zeichenkoordinaten skalieren - context.scale macht das automatisch für Sie.
• teilen sich alle eingehenden mouseevent von 2.