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

Xeon_CC

已于 2024-06-19 22:41:52 修改

阅读量468

点赞数 1

分类专栏： pixi.js 文章标签： Pixi

于 2024-06-18 00:21:28 首次发布

本文链接：https://blog.youkuaiyun.com/Xeon_CC/article/details/139757597

版权

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

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