ホームページ > 記事 > ウェブフロントエンド > FabricJSを使用してテキストボックスを水平方向に反転するにはどうすればよいですか?
FabricJSを使用してテキストボックスを水平方向に反転するにはどうすればよいですか?
- WBOY転載
- 2023-09-16 13:17:021270ブラウズ
このチュートリアルでは、FabricJS を使用して Textbox オブジェクトを水平方向に反転する方法を学びます。テキストボックスに書かれたテキストをカスタマイズしたり、拡大したり、移動したりできます。テキストボックスを作成するには、 Fabric.Textbox クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。 FlipX プロパティを使用して、テキスト ボックス オブジェクトを水平方向に反転できます。
Syntax
new fabric.Textbox(text: String, { flipX: Boolean }: Object)Parameters
text - このパラメータは、 文字列 を受け入れます。テキストボックスに表示したいテキスト文字列を使用します。
オプション (オプション) - このパラメータは、テキスト ボックスの追加のカスタマイズを提供する オブジェクト です。このパラメータを使用すると、色、カーソル、ストローク幅、その他多くのプロパティなどのオブジェクト関連のプロパティを変更できます。 flickX はオブジェクトのプロパティです。
ul>##flipX - このプロパティは ブール値 # を受け入れます## 値を使用すると、オブジェクトを水平方向に反転できます。
例 1
オプション キー
コード例を見てみましょう。 FabricJS のテキストボックス オブジェクトのデフォルトの向きを使用します。
flipX プロパティに False 値を渡したため、テキストは水平方向に反転しません。 <!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 flipX as key with a "false" value</h2>
<p>You can see that the text has not flipped horizontally</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("Each day provides its own gifts.", {
backgroundColor: "#e3dac9",
width: 400,
left: 70,
top: 70,
flipX: false,
});
// Create gradient fill
textbox.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>例 2
この例では、幅は 200px です。テキスト ボックス オブジェクトには、水平方向の線形グラデーションの塗りつぶしがあります。テキストボックスオブジェクトにflipXプロパティを適用すると、テキストが水平方向に反転するため、グラデーションとテキストの反転も確認できます。
えええええ以上がFabricJSを使用してテキストボックスを水平方向に反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。