第3讲：关于Pixi的Text、Container、Sprite、Graphics组件功能作用

首先这里提供一个公用代码：
下部分各种组件基于这个公用代码直接往下添加代码即可。

import {Application, Text, Container, Sprite, BaseTexture, Texture, Graphics} from 'pixi.js'
import './style.css'
import testImageUrl from './images/test.jpg'
// 指明Application的类型是一个HTML的Canvas, 也就是HTMLCanvasElement
let app = new Application<HTMLCanvasElement>();
document.body.appendChild(app.view)

Text组件，非常简单，就是绘制文字

// =============== Text 组件 =================
let text = new Text('Hello World', {
  fill: 0x00FF00, //颜色
  stroke: 0x0000FF, //外框颜色FF
  strokeThickness: 5, //外框粗细
  fontFamily: 'Monospace', //字体
  fontWeight: 'bold' //粗体
});
app.stage.addChild(text);
// ============== Text 组件 ==================

Container是一个容器，如果多个组件放在一个容器中，如果容器的属性发生改变则，容器里面的子控件的属性都会发生改变。

// ============== Container 组件 =====================
let container = new Container();
app.stage.addChild(container);
let text1 = new Text('Hello World', {
  fill: 0x00FF00
})
let text2 = new Text('哈喽世界', {
  fill: 0xFF0000
})
container.addChild(text1);
container.addChild(text2);
// 同时会更改text1和text2的角度
container.angle = 15;Sprite.from(testImageUrl);
// ============== Container 组件 =====================

Sprite组件非常简单，就是显示一张图片

// ============== Sprite 组件 ===================
// 显示一张图片简化方法：
let sprite = Sprite.from(testImageUrl);
app.stage.addChild(sprite);

// 显示一张图片的实际本质代码如下：
// let baseTexture = BaseTexture.from(testImageUrl);
// let texture = new Texture(baseTexture);
// let sprite = new Sprite(texture);
// app.stage.addChild(sprite);
// ============== Sprite 组件 ===================

Graphics组件是用来绘制图形用的，比如线条，圆形，矩形等等。

// ============== Graphics 组件 =================
let graphics = new Graphics();
app.stage.addChild(graphics);
graphics.lineStyle({
  width: 12,
  color:0xFFFFFF
});
graphics.moveTo(40,50);
graphics.lineTo(140,30);
graphics.moveTo(200,30);
graphics.lineTo(300,50);

graphics.lineStyle({
  width: 2,
  color: 0x00FF00
})

graphics.drawCircle(100, 120, 50);
graphics.drawCircle(240,120,50);

graphics.lineStyle();

graphics.beginFill(0xFF00FF);
graphics.drawRect(150,200,80,30);
graphics.endFill();

let hole = new Graphics();
hole.beginFill(0);
hole.drawCircle(180,120,100);
hole.endFill();
graphics.mask = hole;
// ============== Graphics 组件 =================