第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

相关文章

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件