Pixi入门第三章:绘制更多内容

简介: 这篇文章作为Pixi.js入门教程的第三章,介绍了如何使用鼠标事件(如mousemove)来实现在画布上绘制线条的功能,并提供了实现动态绘制的代码示例。

上一个章节绘制了长方形,原型,椭圆形,这节说下绘制线,绘制线和绘制图形的方式差不多,依然是是Graohics对象来绘制,先设置线条的样式,再绘制从某个点到某个点,绘制结束后将这条线加入到stage舞台上。

// 创建图形类
const graphics = new PIXI.Graphics()
//设置线的样式,第一个参数是线宽,第二个参数是颜色
graphics.lineStyle(5, 0xAAAAAA);
//线从第一个点,100,100的坐标点开始绘制
graphics.moveTo(100, 100);
//绘制到300,250的坐标点结束
graphics.lineTo(300, 250);
//将绘制的线加入到舞台stage上
app.stage.addChild(graphics);

效果图如下:

一旦可以绘制线了,其实绘制任何性状都可以了,因为图形就是多个线连起来得到的,比如,我们绘制一个三角形。

// 创建图形类
const graphics = new PIXI.Graphics()
//设置线的样式,第一个参数是线宽,第二个参数是颜色
graphics.lineStyle(5, 0xAAAAAA);
//线从第一个点,100,100的坐标点开始绘制
graphics.moveTo(100, 100);
//绘制到300,250的坐标点结束
graphics.lineTo(300, 250);
//绘制到220,250的坐标点结束
graphics.lineTo(220, 250);
//再绘制回到100, 100的坐标点结束
graphics.lineTo(100, 100);
//将绘制的线加入到舞台stage上
app.stage.addChild(graphics);

效果如下:

不过这又属于骚操作了,因为绘制图形的时候需要自己去计算每个点的坐标才能实现,同时要写很多行的line.to ,所以正常情况还是用提供的绘制图形方法更快一些。比如用标准的方式绘制一个多边形,可以看到同样是绘制一个三角形,但是代码行数变少了,而且还可以添加填充色,设置边框颜色等。

 // 创建图形类
const graphics = new PIXI.Graphics()
//设置多边形的填充色
graphics.beginFill(0xff0044);
//设置多边形的边框线样式
graphics.lineStyle(5, 0xffffff);
// 多边形的每个点放到同一个集合中,两两为一组
graphics.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到舞台上,也就是stage上
app.stage.addChild(graphics);

最后,再来尝试绘制一个贝塞尔曲线,贝塞尔曲线分为二阶和三阶,二阶的贝塞尔曲线有一个点来影响线的曲率,三阶贝塞尔曲线有两个点来影响线的曲率。下面先尝试下二阶的:

        // 创建图形类
        const graphics = new PIXI.Graphics()
        //设置填充颜色
        graphics.beginFill(0xff0044);
        //设置绘制的线条样式
        graphics.lineStyle(5, 0xffffff);
        //设置绘制的开始点,如果不设置会默认从0,0开始绘制
        graphics.moveTo(100, 180)
        //二阶贝塞尔曲线的中间点和目标点,前两个参数为中间点的x和y,后面两个参数为目标点的x和y
        graphics.quadraticCurveTo(90, 100, 210, 100 )
        // 添加到 stage 下
        app.stage.addChild(graphics);

效果图:

再来个三阶的,

        // 创建图形类
        const graphics = new PIXI.Graphics()
        //设置填充颜色
        graphics.beginFill(0xff0044);
        //设置绘制的线条样式
        graphics.lineStyle(5, 0xffffff);
        //设置绘制的开始点,如果不设置会默认从0,0开始绘制
        graphics.moveTo(100, 180)
        //三阶贝塞尔曲线的两个中间点和目标点,前四个参数为中间点的x和y,后面两个参数为目标点的x和y
        graphics.bezierCurveTo(90, 100, 210, 100, 300, 180)
        // 添加到 stage 下
        app.stage.addChild(graphics);

效果图

至此,基本的用Graphics绘制图形,绘制线的操作都全了,下面一章开始做更好玩一点的东西

相关文章
|
存储 移动开发 缓存
uniapp本地存储的几种方式
uniapp本地存储的几种方式
1395 0
|
关系型数据库 数据库 索引
AnalyticDB for PostgreSQL 黑科技解析 - 列存储 Meta Scan 性能加速
本文介绍阿里云 AnalyticDB for PostgreSQL(原HybridDB for PostgreSQL) 产品,即 MPP 数据仓库服务,其列存储 meta scan机制,及其对 分析场景的性能提升。
2886 0
|
12月前
Pixi入门第二章:绘制各种图形
这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。
217 0
Pixi入门第二章:绘制各种图形
|
12月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
288 0
Pixi入门第一章:绘制一个小精灵
|
12月前
|
定位技术 调度
Pixi绘制各种图形
这篇文章作为Pixi.js入门教程的一部分,详细介绍了如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的实现代码。
224 0
Pixi绘制各种图形
|
12月前
|
前端开发 定位技术
Pixi绘制地图和小车
这篇文章讲解了如何使用Pixi.js来绘制地图并在地图上显示小车,包括地图网格的创建和小车图像的定位与移动。
281 1
Pixi绘制地图和小车
|
12月前
ThreeJs绘制贝塞尔曲线
这篇文章介绍了如何利用Three.js绘制贝塞尔曲线,并提供了实现的代码示例与说明。
192 2
ThreeJs绘制贝塞尔曲线
|
缓存 算法 Java
这些年背过的面试题——JVM篇
本文是技术人面试系列JVM篇,面试中关于JVM都需要了解哪些基础?一文带你详细了解,欢迎收藏!
|
存储 JavaScript 前端开发
js中的遍历方法比较:map、for...in、for...of、reduce和forEach的特点与适用场景
js中的遍历方法比较:map、for...in、for...of、reduce和forEach的特点与适用场景
596 0
|
算法 索引
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
934 0
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码