一起学 pixijs(1):常见图形的绘制
大家好,我是前端西瓜哥。
pixijs 是一个强大的 Web Canvas 2D 库,以其强大性能而著称。其底层使用了 WebGL 实现了硬件加速,当然如果不支持的话,也能回退为 Canvas。
本文使用的 pixijs 版本为 7.1.2。
Application
Application 代表一个 pixijs 应用,对应一个 Canvas。
创建一个 Application 实例:
const app = new PIXI.Application({ width: 640, height: 360 });
支持的构造参数很多,这里列举一些常用选项:
- width / height:设置 Canvas 的宽高;
- background:背景色,可以是数字或字符串,默认为
0x000000
,即黑色; - view:指定要应用的 Cavans 元素,可以不提供,pixijs 会给你创建一个新的,你将它添加到 body 元素下就好;
- resizeTo:跟随某个容器元素的尺寸变化进行自适应,比如 window。设置后 width / height 配置项目失效;
更多高阶配置看 官方 API 文档。
这里我没有提供 view,所以我们要将 pixijs 给我们生成的 Canvas 元素挂到页面上:
document.body.appendChild(app.view);
下面我们开始绘制图形。
Graphics
Graphics 类常用于绘制一些比较基础的图形,比如矩形、圆形、线段等。除了绘制图形,还可以用它来设置遮罩(mask)或点击区域(hitArea)。
在一个 Graphics 下,不只是只能画一个图形,也可以画多个图形。
绘制矩形
绘制红色填充色的矩形。
const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 设置填充色
rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色
rect.drawRect(100, 100, 200, 100); // 参数分别为 x, y, width, height
// 添加到 stage 下
app.stage.addChild(rect);
app.stage 是放置图形的地方,也就是 “舞台”。这里我们要通过 addChild 将创建的图形加入进去,之后 pixijs 的渲染器会读取到这个图形进行绘制。
drawRect 是一种旧的写法,看起来是直接在画布上绘制矩形,但其实底层是创建一个 Rect 对象添加到图形树上,先不绘制,然后在图形树准备好之后的渲染阶段,再读取该对象的数据并且绘制。这和 CanvasRenderingContext2D.fillRect 属于不同的绘制机制,后者不会维护图形树状态。
Graphics 本质并不是绘制工具,而是构建树的工具,绘制的实现在其他地方。
另一种写法,首先创建 PIXI.Rectangle 实例,这个实例只是描述一个矩形的属性,本身并不能直接添加到 stage 上,需要通过 Graphics 的 drawShape 添加到 Graphics 上。
const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 设置填充色
rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色
const s = new PIXI.Rectangle(100, 100, 200, 100);
rect.drawShape(s);
// 记得添加到 stage 下
app.stage.addChild(rect);
绘制圆形
绘制圆形同理:
const circle = new PIXI.Graphics();
circle.beginFill(0x00FF44);
circle.lineStyle(5, 0xFFFFFF);
// 参数:cx(中点), cy, radius
circle.drawCircle(100, 100, 50);app.stage.addChild(circle);
效果:
有种严重的锯齿感,这是因为 pixijs 默认是不开抗锯齿的,因为抗锯齿处理要消耗额外的性能。
可以开启全局的抗锯齿能力:
const app = new PIXI.Application({ antialias: true, /* 其他配置项 */ });
开启抗锯齿后的圆形,肉眼可见地圆润了:
绘制圆角矩形
代码:
const roundedRect = new PIXI.Graphics();
roundedRect.beginFill(0xff0044);
roundedRect.lineStyle(5, 0xffffff);
// 参数为:x, y, width, height, radius
roundedRect.drawRoundedRect(100, 100, 200, 100, 16);
// 添加到 stage 下
app.stage.addChild(roundedRect);
效果:
绘制椭圆
代码:
const ellipse = new PIXI.Graphics();
ellipse.beginFill(0xff0044);
ellipse.lineStyle(5, 0xffffff);
// 参数:cx, cy, width, height
ellipse.drawEllipse(100, 100, 80, 40);
// 添加到 stage 下
app.stage.addChild(ellipse);
效果:
绘制线条
代码:
const line = new PIXI.Graphics();
line.lineStyle(5, 0xffffff);
line.moveTo(100, 100);
line.lineTo(300, 250);
// 添加到 stage 下
app.stage.addChild(line);
效果:
绘制多边形
代码:
const polygon = new PIXI.Graphics();
polygon.beginFill(0xff0044);
polygon.lineStyle(5, 0xffffff);
// x1, y1, x2, y2, ...
polygon.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到 stage 下
app.stage.addChild(polygon);
效果:
绘制三阶贝塞尔曲线
代码:
const curve = new PIXI.Graphics();
curve.beginFill(0xff0044);
curve.lineStyle(5, 0xffffff);
curve.moveTo(100, 180)
// cpX, cpY, cpX2, cpY2, toX, toY
curve.bezierCurveTo(90, 100, 210, 100, 300, 180)
// 添加到 stage 下
app.stage.addChild(curve);
效果:
结尾
本文主要讲了 pixijs 中一些基础图形的绘制写法。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。
一起学 pixijs(1):常见图形的绘制相关推荐
- 干货分享 | 代谢组学数据分析,常见图形制作分享-百趣生物
前两期<代谢组学两种常见图形制作分享>.<代谢组学常见图形制作分享(二)>给大家详细介绍了韦恩图.箱线图和ROC曲线的绘制,不知各位趣粉学得如何啦?今天BIOTREE生信分析的 ...
- 数据分析基础学习_Matplotlib_常见图形及绘制(折线图/散点图/柱状图/直方图/饼图)
1.3 常见图形及绘制 matplotlib可以绘制折线图.散点图.柱状图.直方图.饼图 1.3.1 常见图形种类及意义 折线图:以折线的上升或下降来表示统计量的增减变化的统计图 特点:可以显示数据的 ...
- MATLAB中几种常见图形的绘制
plot 二维线图 全页折叠 语法 plot(X,Y) plot(X,Y,LineSpec) plot(X1,Y1,...,Xn,Yn) plot(X1,Y1,LineSpec1,...,Xn,Yn, ...
- Matplotlib常见图形绘制(折线图、散点图、柱状图、直方图、饼图)
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义 折线图:以折线的上升或下降来表示 ...
- 一起学 pixijs(3):Sprite
大家好,我是前端西瓜哥.今天来学习 pixijs 的 Sprite. Sprite pixijs 的 Sprite 类用于将一些纹理(Texture)渲染到屏幕上. Sprite 直译为 " ...
- 视频教程-【吴刚】图形图标绘制表现技巧视频教程-UI
[吴刚]图形图标绘制表现技巧视频教程 业内知名UID.UED.用户体验.品牌策略与创意设计师,十三年行业职业教育培训经验,业内"UI视频第一人",教学总监.视觉设计讲师. Adob ...
- OpenCv Java 简单的图形轮廓绘制 (5)
初学Opencv实现一点点的功能都感觉很是吃力,所以不得不写点东西记忆一下,不然明天又忘记了 好记星不如烂笔头 我就想能不能处分出图片中的正方形和圆形,标记出来,我们这边就绘制器图像,下一步就是认识图 ...
- 基于matlab的能级_波函数及几率密度图形的绘制,基于MATLAB的能级波函数及几率密度图形的绘制.pdf...
基于MATLAB的能级波函数及几率密度图形的绘制.pdf 第 卷 第 期 大 学 物 理 实 验 年 月 出版 壬 刃协 卫 印 文 章编 号 一 ' 一 一 基 于 的能级 . 波 函数 及 几 率 ...
- QT5开发及实例学习之十六Qt5基础图形的绘制
文章目录 前言 一.绘图框架设计 二.绘图区的实现 三.主窗口的实现 前言 设计界面,区分各种形状及画笔颜色.画笔线宽.画笔风格.画笔顶帽.画笔连接点.填充模式.铺展效果.画刷颜色.画刷风格设置等 ...
最新文章
- python lol脚本_配台电脑,能玩LOL顶配和能够写一些python脚本能用ps不卡,预算6k到8k?...
- The Internet Communications Engine (Ice) 跨平台异构通讯方案 第一弹-ICE简介
- C# dataTable 转 IList 问题
- 15个Google面试题以及答案~~~~你会几个?
- 利用zookeeper实现分布式服务故障自动剔除/服务自动注册的思路
- commit work蒙牛 PCM partner channel management
- Postman里如何把某个HTTP的请求和响应作为example保存
- C++ STL 容器的一些总结 --- set(multiset)和map(multimap)
- 41岁,她破格提拔为高校副校长
- 不少程序员都会碰到的三个面试题
- 手把手教你实现 Docker 部署 Redis 集群
- 洛谷P2698 花盆Flowerpot【单调队列】
- wget 和scp对比_curl与wget区别
- KVM系列之硬件管理
- 《算法笔记》胡凡 配套刷题网站
- Windows新版算号器技术原理
- 数据库:数据库设计与数据建模及建模工具(PowerDesigner)
- 向量数量积公式_向量点积公式证明
- Java基础常见英语词汇
- 基于PHP的艺术品展示系统
热门文章
- 怀旧服美服哪个服务器人最多,暴雪:魔兽世界经典怀旧服美服排队人数恐破万...
- Matlab/Simulink-S-function函数(MATLAB版本2020a)
- 竞争-冒险现象及其消除方法
- android虚拟按键keycode,安卓虚拟按键 键码
- 怎么把paper快快读了
- 关于直播,所有的技术细节
- python水位传感器输出水位_水位传感器坏了的表现_判断水位传感器好坏方法
- Activity has leaked window DecorView@992a599[XXXActivity] that was originally add
- 记录_20190626
- 未来站在中国这一边(读后感)