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);

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

相关文章
|
4月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
124 0
Pixi入门第一章:绘制一个小精灵
|
4月前
|
图形学
Pixi入门第三章:绘制更多内容
这篇文章作为Pixi.js入门教程的第三章,介绍了如何使用鼠标事件(如mousemove)来实现在画布上绘制线条的功能,并提供了实现动态绘制的代码示例。
72 0
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
75 0
|
9月前
|
XML Java Android开发
【Android App】勾勒出三维立方体和球体以及它们的转动图形讲解及实战(附源码和演示视频 超详细)
【Android App】勾勒出三维立方体和球体以及它们的转动图形讲解及实战(附源码和演示视频 超详细)
285 0
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
72 0
Echarts实战案例代码(29):来找茬,柱状图在F11全屏下显示三角形的异形情况案例
Echarts实战案例代码(29):来找茬,柱状图在F11全屏下显示三角形的异形情况案例
134 0
|
移动开发 前端开发 JavaScript
利用Canvas进行网上绘图
利用Canvas进行网上绘图
209 0
【Three.js入门】图形用户界面GUI、BufferGeometry创建矩形、随机生成多个随机颜色的三角形
【Three.js入门】图形用户界面GUI、BufferGeometry创建矩形、随机生成多个随机颜色的三角形
268 0
|
定位技术 图形学 容器
Qt5入门学习——图形视图框架
Qt5入门学习——图形视图框架
411 0
Qt5入门学习——图形视图框架
|
XML 前端开发 数据可视化
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
147 0
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?