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

2024-06-18 07:28

本文主要是介绍第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, //外框颜色FFstrokeThickness: 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 组件 =================

在这里插入图片描述

这篇关于第3讲:关于Pixi的Text、Container、Sprite、Graphics组件功能作用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071655

相关文章

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

C++ 中的 if-constexpr语法和作用

《C++中的if-constexpr语法和作用》if-constexpr语法是C++17引入的新语法特性,也被称为常量if表达式或静态if(staticif),:本文主要介绍C++中的if-c... 目录1 if-constexpr 语法1.1 基本语法1.2 扩展说明1.2.1 条件表达式1.2.2 fa

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的