Ich möchte eine reaktionsfähige Leinwand erstellen, die die Größe in Prozent verwendet. Sobald der Benutzer die Größe des Fensters ändert, wird die Leinwand relativ angepasst. Ich bin in der Lage, die Leinwand unter Verwendung von unterhalb Code zu skalieren, aber das einzige Problem ist, wie ich die Fenstergröße skalieren die Mauszeichnung verschwinden.
%Vor%Danke.
Umgang mit Inhalten beim Ändern der Größe einer Zeichenfläche
Wenn Sie die Leinwandgröße ändern, wird der gezeichnete Inhalt immer gelöscht. So verhält sich Canvas.
Sie können den Inhalt entweder nach der Größenänderung neu zeichnen oder Sie können den Inhalt als Bilddaten speichern und nach der Größenänderung wiederherstellen (siehe canvas.toDataURL).
Hier ist Code und eine Fiddle: Ссылка
%Vor%Ich hatte auch das gleiche Problem, das Sie in meiner Anwendung haben, und nachdem ich darüber gelesen hatte, kam ich zu dem Schluss, dass das Verhalten des Canvas-Elements so ist, dass es sich nach der Größenanpassung selbst löscht besteht darin, einen Listener für das Ereignis "Größe neu definieren" hinzuzufügen und die Zeichenfläche neu zu zeichnen, wenn das Ereignis ausgelöst wird.
%Vor%Ich hoffe, es hilft.
Der obige Code entspricht clearRect , das zum Löschen der Zeichenfläche verwendet wird. Daher können Sie die Breite und Höhe nicht anpassen, wenn Sie beibehalten möchten, was zuvor gezeichnet wurde.
Als Lösung können Sie eine neue Arbeitsfläche mit der erforderlichen Breite erstellen und den Inhalt der vorherigen Arbeitsfläche mithilfe von drawImage(c) c zeichnen. Dies ist das Arbeitsflächenobjekt .Dann müssen Sie die Arbeitsfläche löschen
Ich habe ein jQuery-Plugin erstellt, das die HTML5-Canvas-Größenänderung behandelt. Es wurde entwickelt, um die Lücke zwischen mobilen und Desktop-Benutzern zu schließen. Es ist immer noch ein WIP, aber es ist erweiterbar und enthält einige grundlegende Zeichenfunktionen.
Ich hatte das gleiche Problem. Meine Lösung verwendet die CSS3-Eigenschaft Zoom zum übergeordneten Container der Zeichenfläche:
%Vor%coef - Koeffizient, um Einrückungen der Leinwand von den Grenzen der Eltern zu machen. Sie können es zu Null machen.
Ich hoffe, es hilft jemandem: -)
Tags und Links javascript jquery html5 canvas