![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
PixiJs
文章平均质量分 66
幻蝶Love
前端工程师
展开
-
PixiJS案例——顺逆时钟判断
关于手势进行顺/逆时钟滑动的判断,此方案不局限于使用 PixiJs 才能完成,只要能够获取到手势坐标即可。原创 2023-01-16 11:17:14 · 307 阅读 · 0 评论 -
PixiJS案例——移动旋转缩放
PixiJS案例——移动旋转缩放原创 2022-04-26 10:19:52 · 3781 阅读 · 1 评论 -
PixiJS学习(10)事件机制
简介事件机制是人机交互的前提,用户在进行操作(点击)之后,页面对于事件的反馈和相应。针对 Pixi 的事件机制,主要还是比较常规的一些事件:鼠标事件、触摸事件。例如:点击事件(tap:移动端,click:pc端)、触摸事件(touchstart:开始触摸,touchmove:触摸移动,touchend:结束触摸)事件绑定在 PixiJs 中对于事件的绑定比较简单,首先将对象的 interactive 设置为 true ,然后是 on 进行绑定。...原创 2021-07-21 17:50:50 · 3226 阅读 · 4 评论 -
PixiJS学习(9)动画序列帧
PixiJs 动画序列帧原创 2020-06-16 16:06:44 · 4634 阅读 · 0 评论 -
PixiJS学习(8)预加载
PixiJs 预加载 Loader原创 2020-06-16 15:51:28 · 3243 阅读 · 0 评论 -
PixiJS学习(6)文本
简介在图像渲染的过程中,有的时候会需要一些动态改变的文字,而不是一成不变的图片,这时它们一般都是直接渲染的,而且还可以设置字体、样式等等。但是如果它们的样式独具特色且不拘一格,我们也可以使用图片,每一个字符对应一张图片,这样的方式叫做位图文本。在pixiJs中有单独需要文字的类,基础文本(http://pixijs.download/release/docs/PIXI.Text.html)...原创 2020-01-06 17:52:13 · 3355 阅读 · 0 评论 -
PixiJS学习(7)遮罩
简介原创 2020-05-25 09:36:23 · 2625 阅读 · 1 评论 -
PixiJS学习(5)几何图形
简介:几何图形其实说的简单一点就是在数学上的:点、线、面。点:在平面几何图形中一般把点认为是一个质点,只表示为笛卡尔坐标系中的一个坐标点,因此没有画一个点这样的方法;在实践中一般用圆表示一个点。线:在平面几何图形中的线一般可以分为两种:直线和曲线。直线,在数学中的定义是一条无限长的线段,这里的可以将此直线认为是一条线段线段,它有自己的起点和终点,而且还会有宽度、样式、线段节点的...原创 2019-12-20 15:53:39 · 3542 阅读 · 0 评论 -
PixiJS案例——遮罩涂鸦
简介:用不同色彩在固定区域进行涂鸦。思路:1. 使用 pixi.js 构建 canvas;2. 添加需要涂鸦的 png 图片到整个场景;3. 在需要涂鸦的图片上层添加一个可以绘制颜色的几何类,并将它的遮罩设为需要涂鸦的精灵;4. 自由涂鸦即可;素材:1. pixijs版本:5.2.02. 图片:需要一个涂鸦轮廓的图片 1.png。图片就在下面,是一个白色透明...原创 2019-12-15 16:36:24 · 3085 阅读 · 0 评论 -
PixiJS学习(4)导出 base64
简介:在生产过程中有时候可能需要获取 pixiJs 生成的 canvas 上下文,或者需要导出当前 canvas 的 base64 ,从而实现保存图片的功能。Base64是一种用64个字符来表示任意二进制数据的方法。用记事本打开exe、jpg、pdf这些文件时,我们都会看到一大堆乱码,因为二进制文件包含很多无法显示和打印的字符,所以,如果要让记事本这样的文本处理软件能处理二进制数据,就...原创 2019-11-15 14:30:13 · 1457 阅读 · 0 评论 -
PixiJS学习(3)容器管理
简介:在整个 pixiJs 中,所有的精灵和元素的根都是挂载在“舞台”这个巨大的容器上面的,然后经过渲染就可以在 canvas中显示出来。它们的结构关系和 html 的 dom 树相似,二者可以类比,”大家“相互嵌套,有“父子子属关系”,有“兄弟并列关系”,有“层级上下关系”。因为有它们有相互嵌套的关系,所有就有了“容器”这样的存在。一个容器中可以添加精灵和元素,也可以添加另外一个容器。 ...原创 2019-11-15 12:01:49 · 1429 阅读 · 0 评论 -
PixiJS学习(2)添加一个位图纹理
简介:在所有的 2D(包括 3D) 渲染中都有 Texture 这样一个概念,翻译过来应该叫“纹理”。很多书籍或文章中对于它的解释五花八门,我个人的理解是:它是一个材质、贴图这样的概念。这里所说的位图就是我们常说的一张图片,一个 .png 或者 .jpg 图片。在原生的 canvas 中添加一张图片,我们使用的是 drawImage() 。可以对图片进行缩放和裁剪。https://...原创 2019-11-12 11:23:47 · 1882 阅读 · 0 评论 -
PixiJS学习 基础概念
介绍简介 Pixi是一款速度极快的2D Sprite渲染引擎。那是什么意思?这意味着它可以帮助您显示,制作和管理交互式图形,以便使用JavaScript和其他HTML5技术轻松制作动画,游戏和一些其他应用程序。 Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现。PixiJS 的目标是提供一个快速且轻量级的2...原创 2019-10-12 17:44:07 · 1062 阅读 · 0 评论 -
PixiJS学习(1)创建一个canvas
简介PixiJs是一款轻量级的渲染引擎库官网地址:https://www.pixijs.com/github:https://github.com/pixijs/pixi.js<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.0/pixi.min.js"></script>...原创 2019-10-12 17:10:55 · 1672 阅读 · 0 评论