Pixi入门第二章:绘制各种图形

简介: 这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。

上一个章节已经大概介绍了Pixi,并做了一个简单的例子,这节正式入门,因为pixi是用来绘制图形的,那么这节就从头开始说用pixi绘制一个简单的图形,先从最简单的长方形开始,

//新建一个PIXI的Graphics绘图对象
const graphics = new PIXI.Graphics()
// 开始绘图设置填充颜色,两个参数分别为(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
// 创建图形,四个参数分别是x,y,widht,height,也就是从x,y坐标开始绘制一个宽200,高100的长方形
graphics.drawRect(50, 50, 200, 100)
// 结束绘制操作
graphics.endFill()
//将绘制的图形添加到舞台stage中
app.stage.addChild(graphics);

如此这般,便在画布中有了一个黄色的长方形,同时还可以将长方形设置为圆角,显得圆润一些:只需要将代码中的graphics.drawRect(50, 50, 200, 100)替换为graphics.drawRoundedRect(50, 50, 200, 100,5);新替换的方法最后一个值就是圆角的半径,类似div中的radius值,和radius一样,你如果长方形改为正方形,并把圆角的半径设置为边的一半,你就会得到一个圆形

  // 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从,50,50的坐标绘制宽和高都为100的矩形,并设置圆角半径为50
graphics.drawRoundedRect(50, 50, 100, 100,50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);

当然这是通过骚操作的方式实现的,正儿八经的绘制方法如下,绘制好的效果和上图一模一样,唯一的区别就是长方形的x和y是开始绘制的点,圆的x和y是圆心,

// 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从,1001,00的坐标绘制半径为50的圆
graphics.drawCircle(100, 100, 50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);

但是这两种方式都只能绘制出圆或者圆角的方形,没办法绘制出椭圆,因为椭圆又是一个新的绘制方法:graphics.drawEllipse,下面在(100,100)的位置绘制一个宽100,高50的椭圆

// 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从,100,100的坐标绘制宽100高50的椭圆
graphics.drawEllipse(100, 100, 100, 50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);

常规图形就这些了,下一章再介绍其他花里花哨的图形绘制方法。

相关文章
|
前端开发 算法 数据可视化
可拖拽流程图组件开发
可拖拽流程图组件开发
423 0
|
网络协议 应用服务中间件 nginx
24 个 Docker 常见问题处理技巧
24 个 Docker 常见问题处理技巧
2543 1
|
存储 前端开发 JavaScript
如何解决前端常见的竞态问题?
如何解决前端常见的竞态问题?
487 0
|
6月前
|
人工智能 缓存 算法
《人机协同的边界与价值:开放世界游戏系统重构中的AI工具实战指南》
本文复盘了开放世界游戏“动态实体调度系统”重构项目中,借助Cursor与CodeBuddy实现人机协同开发的30天实践。项目初期因代码耦合、性能不达标陷入技术死锁,团队通过“CodeBuddy全局架构拆解+Cursor局部编码优化”的组合模式,完成模块拆分、算法重构、资源泄漏排查与兼容性测试四大核心任务。AI工具在全局逻辑拆解、隐性问题定位、测试用例生成等方面效率提升显著,而人类聚焦业务规则定义、方案决策与细节优化,形成“AI搭框架、人类填细节”的协作模式。
281 12
|
10月前
|
JavaScript API 网络架构
Nuxt3报错解读:解除“Hydration children mismatch in <div>”的困扰。
记住,每一次报错都是对你编程能力的提升,在你一步步攀爬这座小山时,那些微小而坚实的步伐不仅帮你解决眼前的问题,也正是你构筑面向未来的金字塔的基石。
304 15
|
JavaScript 前端开发 编译器
将 CommonJS 模块转换为 ES6 模块
【10月更文挑战第11天】 将 CommonJS 模块转换为 ES6 模块有三种主要方法:手动修改代码、使用工具(如 Babel)自动转换和逐步迁移。手动修改涉及导出和导入方式的转换,确保名称和结构一致;使用工具可自动化这一过程;逐步迁移适用于大型项目,先在新模块中使用 ES6 语法,再逐步替换旧模块。转换过程中需注意兼容性、代码逻辑调整和充分测试。
901 58
|
安全 Java 编译器
深入理解Java中synchronized三种使用方式:助您写出线程安全的代码
`synchronized` 是 Java 中的关键字,用于实现线程同步,确保多个线程互斥访问共享资源。它通过内置的监视器锁机制,防止多个线程同时执行被 `synchronized` 修饰的方法或代码块。`synchronized` 可以修饰非静态方法、静态方法和代码块,分别锁定实例对象、类对象或指定的对象。其底层原理基于 JVM 的指令和对象的监视器,JDK 1.6 后引入了偏向锁、轻量级锁等优化措施,提高了性能。
713 3
|
小程序 测试技术 开发者
微信小程序体验版(测试环境)和线上版(生产环境)发布
微信小程序体验版(测试环境)和线上版(生产环境)发布
2766 0
|
前端开发 API 数据库
面试官问:如何防止重复提交请求,99%的前端能说出来!
如何防止接口重复提交是一个常见的系统设计问题,主要目的是确保关键操作的原子性和一致性。以下是简化的摘要: 这些方法可以单独或组合使用,取决于系统规模和业务需求。例如,对于低流量系统,简单的请求唯一ID和数据库唯一索引可能足够;而对于高并发场景,可能需要结合前端禁用和后端分布式锁来提高可靠性。幂等性设计是确保接口安全的一种通用策略,适用于各种场景。
|
存储 算法 图形学

热门文章

最新文章