ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?
FabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?
- PHPz転載
- 2023-08-23 18:01:021212ブラウズ
このチュートリアルでは、FabricJS を使用してテキストボックスの中央揃えのスケーリングを無効にする方法を学びます。テキストボックスに書かれたテキストをカスタマイズしたり、拡大したり、移動したりできます。テキストボックスを作成するには、 Fabric.Textbox クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。コントロールをスケーリングするときは、オブジェクトの変換原点として中心を使用して、centeredScaling プロパティに true 値を割り当てます。
Syntax
new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)Parameters
text - このパラメータは、String を受け入れます。使用するテキスト文字列。テキストボックスに表示したい。
オプション (オプション) - このパラメータは、テキスト ボックスの追加のカスタマイズを提供する オブジェクト です。このパラメータを使用すると、色、カーソル、ストローク幅、および centeredScaling プロパティに関連するオブジェクトのその他のプロパティを変更できます。
centeredScaling - このプロパティはブール値を受け入れ、オブジェクトが使用するかどうかを制御できます。その中心が変容の起点であるかどうか。
オプション キー
centeredScaling をキーとして渡し、「true」値を割り当てます
centeredScaling プロパティが有効な場合にテキストボックス オブジェクトがどのように動作するかを理解するために、コード例を見てみましょう。オブジェクトをズームインすると、変換の原点はテキスト ボックスの中心になります。
<!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 centeredScaling as key and assigning a "true" value to it</h2>
<p>Try scaling the textbox to see that centered scaling has been enabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: true,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>例 2
centeredScaling プロパティを無効にする
「false」値を指定すると、centeredScaling プロパティを無効にできます。それのための 。これにより、テキスト ボックスの中心が変換の中心として使用されなくなります。 -
<!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>Disabling centeredScaling property</h2>
<p>Try scaling the textbox to see that centered scaling has been disabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html> を示すコード サンプルを次に示します。以上がFabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。