この記事では、FabricJS を使用してキャンバスのビューポートをカスタマイズする方法を学びます。ビューポートは、ユーザーに表示されるキャンバスの領域です。 viewportTransform プロパティを使用してビューポートをカスタマイズできます。これにより、ビューポートの変換を制御できます。
new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: Object)Element - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅、およびキャンバスに関連するその他の多くの属性を変更できます。その中には viewportTransform も含まれます。平面上の変換を決定するために使用される 6 つの値の配列を受け入れます。デフォルト値は、canvas.viewportTransform = [1, 0, 0, 1, 0, 0] です。
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>viewportTransform プロパティをカスタム値を持つキーとして渡し、オブジェクトを縮小します
スケーリング 80% とパンを示す別のコード例を見てみましょう。変換を傾けずに右下隅を動かします。えええええ
以上がFabricJS を使用してキャンバスのビューポートをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
