FabricJS – Wie aktiviere ich die Retina-Skalierung in der URL-Zeichenfolge eines Linienobjekts?-js-Tutorial-php.cn

FabricJS – Wie aktiviere ich die Retina-Skalierung in der URL-Zeichenfolge eines Linienobjekts?

PHPz

Freigeben： 2023-09-15 09:21:05

nach vorne

1027 Leute haben es durchsucht

FabricJS – 如何在 Line 对象的 URL 字符串中启用视网膜缩放？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die Retina-Skalierung in einer URL-Zeichenfolge eines Linienobjekts aktivieren. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine fabric.Line-Instanz erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um die Retina-Skalierung in der URL-Zeichenfolge eines Linienobjekts zu aktivieren, verwenden wir das Attribut „enableRetinaScaling“. Dies hat keine Auswirkung auf das Bild selbst, aber die Leinwand wird durch devicePixelRatio skaliert, um eine bessere Darstellung auf Retina-Bildschirmen zu ermöglichen. Syntax

 toDataURL({ enableRetinaScaling: Boolean }: Object): String

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist eine URL-Darstellung eines Linienobjekts, das zusätzliche Anpassungen ermöglicht. Höhe, Masse, Multiplikator und viele andere Eigenschaften können mit diesem Parameter geändert werden, von dem enableRetinaScaling eine Eigenschaft ist.

enableRetinaScaling: Diese Eigenschaft akzeptiert einen Booleschen -Wert, der es uns ermöglicht, die Retina-Skalierung für das Bild zu aktivieren. 🔜 Sobald wir die Konsole über die Entwicklungstools öffnen, können wir die URL-Darstellung des Line-Objekts sehen. Wir können die URL kopieren und in die Adressleiste eines neuen Tabs einfügen, um die endgültige Ausgabe zu sehen. Da wir der Eigenschaft enableRetinaScaling einen falschen Wert übergeben haben, wird die Retina-Skalierung nicht aktiviert.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the enableRetinaScaling property and passing it a false value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling disabled
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      // Using the toDataURL method
      console.log(line.toDataURL({
         enableRetinaScaling: false
      }));
   </script>
</body>
</html>

Nach dem Login kopieren

enableRetinaScaling

und übergeben Sie ihm einen wahren Wert Beispiel

< h3>Schauen wir uns ein Codebeispiel an, um zu sehen, wann Der Eigenschaft „enableRetinaScaling“ wurde ein wahrer Wert übergeben. In diesem Fall handelt es sich um eine Netzhautschuppung wird aktiviert.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the enableRetinaScaling property and passing it a true value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling enabled
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({
         enableRetinaScaling: true
      }));
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie aktiviere ich die Retina-Skalierung in der URL-Zeichenfolge eines Linienobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!