ホームページ  >  記事  >  ウェブフロントエンド  >  FabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?

FabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?

王林
王林転載
2023-09-03 10:13:05680ブラウズ

FabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?

この記事では、FabricJS を使用してキャンバスのビューポートをカスタマイズする方法を学びます。ビューポートは、ユーザーに表示されるキャンバスの領域です。 viewportTransform プロパティを使用してビューポートをカスタマイズできます。これにより、ビューポートの変換を制御できます。

Syntax

new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)

Parameters

  • Element - このパラメータは em> 要素そのものであり、Document.getElementById() または の ID を使用して取得できます。要素自体。 FabricJS キャンバスはこの要素で初期化されます。

  • オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅、およびキャンバスに関連するその他の多くの属性を変更できます。その中には viewportTransform も含まれます。平面上の変換を決定するために使用される 6 つの値の配列を受け入れます。デフォルト値は、canvas.viewportTransform = [1, 0, 0, 1, 0, 0] です。

#例 1

viewportTransform 属性をクラスのキーとして渡す

コード例を見て理解しましょうカスタマイズ方法 キャンバスのビューポート。この例では、値 [0.7, 0.1, 0.5, 0.9, 20, 50] を使用して、

はscaleX、skewY、skewX、scaleY、translation、および translationY を表します。それぞれ。

<!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>Customizing the viewport of the canvas using FabricJS </h2>
   <p>Select an area around the object to see the viewports.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

例 2

viewportTransform プロパティをカスタム値を持つキーとして渡し、オブジェクトを縮小します

スケーリング 80% とパンを示す別のコード例を見てみましょう。変換を傾けずに右下隅を動かします。

えええええ

以上がFabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。