Pixi’VNテキスト (`Text`)
`Text` コンポーネントを使用してキャンバスにテキストを表示およびスタイル設定する方法。 `showText`、`TextStyle`、削除、および配置機能について説明します。
Text コンポーネントは PixiJS.Text コンポーネントを継承しているため、PixiJS.Text のすべてのメソッドとプロパティを使用できます。 キャンバス上にテキストを表示するために使用します。
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);PixiJS.Text コンポーネントと比較して、Text は以下の機能を追加しています：
- 追加の位置指定: パーセンテージによる整列と配置。
表示
キャンバスにテキストを表示する最も簡単な方法は、showText 関数を使用することです。
import { newLabel, showText } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let text = await showText("text", "Hello World!", {
xAlign: 0.5,
yAlign: 0.5,
});
text.style.fontSize = 30;
},
]);削除
他のキャンバスコンポーネントと同様に、canvas.remove 関数を使用してこのコンポーネントを削除できます。
スタイル
テキストをスタイル設定するには、TextStyle を使用します。 このクラスを使用すると、フォントファミリー、サイズ、色、ストローク、シャドウなどをカスタマイズできます。
import { canvas, newLabel, Text, TextStyle } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
const skewStyle = new TextStyle({
fontFamily: "Arial",
dropShadow: {
alpha: 0.8,
angle: 2.1,
blur: 4,
color: "0x111111",
distance: 10,
},
fill: "#ffffff",
stroke: { color: "#004620", width: 12, join: "round" },
fontSize: 60,
fontWeight: "lighter",
});
const skewText = new Text({
text: "SKEW IS COOL",
style: skewStyle,
align: 0.5,
skew: { x: 0.65, y: -0.3 },
});
canvas.add("text", skewText);
},
]);