FabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-03 10:13:05

転載

738 人が閲覧しました

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

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

Syntax

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

ログイン後にコピー

Parameters

Element - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅、およびキャンバスに関連するその他の多くの属性を変更できます。その中には 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>  <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 サイトの他の関連記事を参照してください。