Wie kann die Strichstärke einer Ellipse beim Skalieren mit FabricJS beibehalten werden?-js-Tutorial-php.cn

Wie kann die Strichstärke einer Ellipse beim Skalieren mit FabricJS beibehalten werden?

王林

Freigeben： 2023-08-30 19:25:11

nach vorne

1188 Leute haben es durchsucht

如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

In diesem Tutorial erfahren Sie, wie Sie die Strichstärke einer Ellipse beim Skalieren mit FabricJS beibehalten. Standardmäßig erhöht oder verringert sich die Strichstärke basierend auf dem Skalierungswert des Objekts. Wir können dieses Verhalten jedoch deaktivieren, indem wir das Attribut StrokeUniform verwenden.

Syntax

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen styleUniform eine Eigenschaft ist.

Optionstasten

Stroke Uniform – Diese Eigenschaft akzeptiert einen booleschen Wert, mit dem wir angeben können, ob die Strichbreite mit dem Objekt skaliert. Der Standardwert ist False.

Beispiel 1

Die Standarddarstellung der Strichstärke beim Skalieren eines Objekts< /strong>

Das folgende Beispiel beschreibt die Standarddarstellung der Strichstärke eines Ellipsenobjekts, das skaliert wird. Da wir das Attribut tripUniform nicht verwenden, wird die Strichbreite auch von der Skalierung des Objekts beeinflusst.

<!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>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergeben des Attributs StrokeUniform als Schlüssel

In diesem Beispiel übergeben wir das Attribut StrokeUniform als Schlüssel. Daher nehmen die Striche des Objekts bei der Skalierung des Objekts nicht mehr zu oder ab. In diesem Beispiel wurde dem Attribut StrokeUniform der Wert „true“ zugewiesen, wodurch sichergestellt wird, dass der Strich immer genau der Pixelgröße entspricht, die für die Strichbreite eingegeben wurde.

<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
            strokeUniform: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann die Strichstärke einer Ellipse beim Skalieren mit FabricJS beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!