FabricJS を使用して楕円のキャンバスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して楕円のキャンバスを作成するにはどうすればよいですか?

WBOY

リリース： 2023-09-12 23:05:02

転載

1358 人が閲覧しました

如何使用 FabricJS 创建带有椭圆的画布？

このチュートリアルでは、FabricJS を使用して Ellipse オブジェクトを含むキャンバスを作成する方法を学びます。楕円形は、FabricJS が提供するさまざまな形状の 1 つです。楕円を作成するには、Fabric.Ellipse クラスのインスタンスを作成し、それをキャンバスに追加します。

Syntax

new fabric.Ellipse({ rx: Number, ry: Number }: Object)

ログイン後にコピー

Parameters

Options(オプション) - このパラメータは追加で提供されます。カスタムオブジェクトを楕円に追加します。このパラメータを使用して、色、カーソル、ストローク幅、および楕円オブジェクトに関連付けられたその他の多くのプロパティを変更します。rx および ry は、楕円オブジェクトのプロパティです。
< /li>

オプションキー

rx - このプロパティは 数値を受け入れます、楕円の水平方向の半径を決定します。水平半径を指定しない場合、楕円はキャンバス上に表示されません。
ry - このプロパティは number を受け入れます。これにより、垂直方向の半径が決まります。楕円。垂直半径を指定しない場合、楕円はキャンバス上に表示されません。

例 1

Fabric.Ellipse() のインスタンスを作成し、キャンバスに追加します

例を見てみましょう。キャンバスに楕円を追加する方法の例。ここでは、水平方向の半径が 80 ピクセル、垂直方向の半径が 50 ピクセルのオブジェクトを作成します。空色を使用してオブジェクトを 16 進値 #87ceeb で塗りつぶします。

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</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: 115,
            top: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

ログイン後にコピー