FabricJS を使用して楕円の高さを設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して楕円の高さを設定するにはどうすればよいですか?

WBOY

リリース： 2023-08-24 15:05:07

転載

932 人が閲覧しました

如何使用 FabricJS 设置椭圆的高度？

このチュートリアルでは、FabricJS を使用して楕円の高さを設定する方法を学びます。楕円形は、FabricJS が提供するさまざまな形状の 1 つです。楕円を作成するには、 Fabric.Ellipse クラスのインスタンスを作成し、それをキャンバスに追加します。位置、不透明度、ストローク、サイズを変更することで、楕円オブジェクトを操作できます。 FabricJS では、width プロパティと height プロパティを使用してオブジェクトのサイズを制御できます。

構文

new fabric.Ellipse({ height: Number }: Object)

ログイン後にコピー

パラメータ

オプション (オプション) - このパラメータは Object< /em> 楕円に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および height がプロパティであるオブジェクトに関連付けられたその他の多くのプロパティを変更できます。

オプションキー

Height - このプロパティは 数値を受け入れます オブジェクトの高さを指定できます。割り当てられた値によって高さが決まります。

例 1

height プロパティのデフォルトの動作< /strong>

例を見て理解しましょうheight プロパティのデフォルトの動作。

<!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 set the height of an Ellipse using FabricJS?</h2>
      <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</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: 100,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

ログイン後にコピー

例 2

height プロパティをキーとして渡します

楕円のサイズは水平方向によって決まるため、と垂直半径の場合、そのサイズは変わりません。
えええええ
以上がFabricJS を使用して楕円の高さを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。