FabricJS を使用して境界線の色を持つ長方形を作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して境界線の色を持つ長方形を作成するにはどうすればよいですか?

PHPz

リリース： 2023-09-09 20:53:08

転載

1351 人が閲覧しました

如何使用 FabricJS 创建带有边框颜色的矩形？

このチュートリアルでは、FabricJS を使用して境界線の色を持つ四角形を作成します。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。四角形を作成するには、fabric.Rect クラスのインスタンスを作成し、キャンバスに追加する必要があります。

FabricJS は非常に柔軟なので、四角形オブジェクトを好きなようにカスタマイズできます。 FabricJS によって提供されるプロパティの 1 つは borderColor で、これを使用すると、オブジェクトがアクティブなときに境界線の色を操作できます。

構文

new fabric.Rect({ borderColor: String }: Object)

ログイン後にコピー

パラメータ

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

borderColor - このプロパティは、色を指定する 文字列を受け入れます。選択四角形オブジェクトの境界線。デフォルト値は rgb(178,204,255) です。

文字列値を使用して borderColour キーを渡す

borderColor キーに割り当てました。これは、長方形のオブジェクトを選択するときに青い境界線を作成するのに役立ちます。

<!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>Passing borderColour key with a String value</h2>
   <p>Select the rectangle to see the border colour</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "blue",
         padding: 9,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

ログイン後にコピー

単純な色の名前を文字列として指定する代わりに、RGBA 値を borderColor キー

rgb(128,0,128) を使用しました。 えええええ

以上がFabricJS を使用して境界線の色を持つ長方形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。