fabric.js Ändern Sie die Größe der Leinwand, um sie an den Bildschirm anzupassen

8

Ich entwickle gerade eine Anwendung auf einem mobilen Gerät (Android und iPhone) mit ionic und cordova. Ich möchte ein Bild bearbeiten. Ich benutze die fabric.js-Bibliothek, um das zu tun. Fabric.js konvertiert ein Bild und andere Elemente in Canvas. Dann füge ich ein Bild auf die Leinwand (Aufkleber) und exportiere es als Bild (dataURL). Daher ist die Größe der Leinwand sehr wichtig, da es sich um einen Qualitätsfaktor handelt (ein Bild, das auf einer kleinen Leinwand basiert, führt zu schlechter Qualität). Die Leinwandgröße beträgt etwa 607 * 1080 Pixel (abhängig von dem Gerät, das das Foto aufgenommen hat). Ich möchte es auf dem Bildschirm ohne Qualitätsverlust anpassen (wie unten erklärt, kann ich die Leinwand nicht ändern, ohne Qualität zu verlieren).

Ich habe versucht, drei Ideen, aber niemand hat funktioniert.

  1. Leinwandgröße anpassen : Die Qualität ist verloren (das Bild, das exportiert wird, hat eine Leinwandgröße)
  2. Ansichtsfenster anpassen : cordova erlaubt es nicht, das Ansichtsfenster auf dem Mobilgerät zu ändern. Es gibt einen Workaround, aber es wird mein Design (sehr kleine Navbar, kleineres Menü, ...)
    3. brechen
  3. CSS3-Zoom-Eigenschaften verwenden : Es funktioniert wie ein Zauber auf dem Desktop, aber es gibt ein Event-Mapping-Problem auf dem mobilen Gerät (Ich habe das ios nicht getestet, aber das Problem ist bei android Webview aufgetreten). Die Ereigniszuordnung wird nicht gezoomt. Die Leinwand ist verkleinert, aber es ist nicht möglich, mit Canvas-Elementen zu interagieren. Wenn sich ein Canvas-Element (Aufkleber) bei x: 100 y: 100 befindet, wenn ich die Zoom-Eigenschaft auf 0,5 setze, ist das Element die Position bei (50,50) und nicht mehr bei (100,100). Gibt es eine Möglichkeit, die Ereigniszuordnung in Abhängigkeit von der Zoom-Eigenschaft des Android-Webview zu korrigieren?

Ich weiß nicht, ob es andere Möglichkeiten gibt, das zu tun, aber ich bin seit drei Tagen mit diesem Problem beschäftigt und habe viel Zeit in Foren, fabricjs doc und google verbracht und finde keine Arbeitslösung oder etwas anderes, das mir helfen kann.

EDIT: Es gibt 2 funktionierende Lösung unten. Überprüfen Sie meine Antwort, um zu sehen, wie man das mit CSS macht.

    
X4V1 16.06.2015, 08:25
quelle

2 Antworten

9

1. Verwenden Sie CSS, um die richtige Auflösung für die Leinwand festzulegen:

%Vor%

css:

%Vor%

Profis:

  

Die gesamte Auflösung ergibt sich aus Breite und Höhe des Arbeitsbereichs (800/600)

Nachteile:

  

Passen Sie gut für quadratische Canvases Seitenverhältnis (1: 1), Probleme mit der Ausgabe   Für seltsame Seitenverhältnisse, wo Sie Ihre CSS-Höhe berechnen müssen   basiert,

%Vor%      

das ist nicht in meiner Liga in CSS ...

     

Lesen Sie vor einiger Zeit auf der Seite fabric.js git issues wo, technique   (css resize) wird aufgrund von Langsamkeit und falschen Objekten nicht empfohlen   Transaktionen, dies kann geändert werden Ich weiß, ich habe getestet und Objekte waren   falsche Größe (zufällige farbige Pixel, Transaktionsschatten bleiben erhalten)   in Leinwand, mit anderen Worten eine Unordnung)

2. Ändern Sie die Größe der Arbeitsfläche auf die exakte Größe (Auflösung), wenn Sie die Vorlage senden müssen, und erstellen Sie dann das generierte Bild

Ändern Sie die Größe der Leinwand auf die Größe des Fensters (Responsive-Leinwand). Wenn Sie in eine exakte Größe exportieren möchten, müssen Sie die Leinwand auf die exakte Pixelauflösung skalieren oder eine andere Leinwand erstellen.

Dieses Beispiel bezieht sich auf 1: 1-Ration-Canvas (Sie müssen das Seitenverhältnis auf Canvas und Objekte im Inneren anwenden):

%Vor%

Beim Senden von Export-Canvas-Daten Größe der Leinwand auf die gewünschte Auflösung umstellen, voila:

%Vor%

Es ist keine große Sache mit den Rationen anders als 1: 1 müssen Sie auch Multiplayer-Maßstab für Höhe berechnen, leicht verständliches Verhältnis: Ссылка

    
SilentTremor 16.06.2015, 14:45
quelle
2

Ich habe einen Trick dafür gefunden, ohne die Leinwand kopieren zu müssen. Diese Lösung ist wirklich nah an CSS-Zoom-Eigenschaft, aber Ereignisse werden korrekt behandelt.

Dies ist ein Beispiel, um die Leinwand halb so groß darzustellen:

%Vor%     
X4V1 16.06.2015 20:24
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Optimistisches Sperren, das beim manuellen Einstellen des Versionsfeldes keine Ausnahme auslöst