- 博客(28)
- 收藏
- 关注
RSS订阅原创 PixiJS学习（10）事件机制
简介事件机制是人机交互的前提，用户在进行操作（点击）之后，页面对于事件的反馈和相应。针对 Pixi 的事件机制，主要还是比较常规的一些事件：鼠标事件、触摸事件。例如：点击事件（tap：移动端，click：pc端）、触摸事件（touchstart：开始触摸，touchmove：触摸移动，touchend：结束触摸）事件绑定在 PixiJs 中对于事件的绑定比较简单，首先将对象的 interactive 设置为 true ，然后是 on 进行绑定。...
2021-07-21 17:50:50
3089
4
原创 PixiJS学习（6）文本
简介在图像渲染的过程中，有的时候会需要一些动态改变的文字，而不是一成不变的图片，这时它们一般都是直接渲染的，而且还可以设置字体、样式等等。但是如果它们的样式独具特色且不拘一格，我们也可以使用图片，每一个字符对应一张图片，这样的方式叫做位图文本。在pixiJs中有单独需要文字的类，基础文本（http://pixijs.download/release/docs/PIXI.Text.html）...
2020-01-06 17:52:13
3239
原创 PixiJS学习（5）几何图形
简介：几何图形其实说的简单一点就是在数学上的：点、线、面。点：在平面几何图形中一般把点认为是一个质点，只表示为笛卡尔坐标系中的一个坐标点，因此没有画一个点这样的方法；在实践中一般用圆表示一个点。线：在平面几何图形中的线一般可以分为两种：直线和曲线。直线，在数学中的定义是一条无限长的线段，这里的可以将此直线认为是一条线段线段，它有自己的起点和终点，而且还会有宽度、样式、线段节点的...
2019-12-20 15:53:39
3412
原创 PixiJS案例——遮罩涂鸦
简介：用不同色彩在固定区域进行涂鸦。思路：1. 使用 pixi.js 构建 canvas；2. 添加需要涂鸦的 png 图片到整个场景；3. 在需要涂鸦的图片上层添加一个可以绘制颜色的几何类，并将它的遮罩设为需要涂鸦的精灵；4. 自由涂鸦即可；素材：1. pixijs版本：5.2.02. 图片：需要一个涂鸦轮廓的图片 1.png。图片就在下面，是一个白色透明...
2019-12-15 16:36:24
2992
原创 PixiJS学习（4）导出 base64
简介：在生产过程中有时候可能需要获取 pixiJs 生成的 canvas 上下文，或者需要导出当前 canvas 的 base64 ，从而实现保存图片的功能。Base64是一种用64个字符来表示任意二进制数据的方法。用记事本打开exe、jpg、pdf这些文件时，我们都会看到一大堆乱码，因为二进制文件包含很多无法显示和打印的字符，所以，如果要让记事本这样的文本处理软件能处理二进制数据，就...
2019-11-15 14:30:13
1390
原创 PixiJS学习（3）容器管理
简介：在整个 pixiJs 中，所有的精灵和元素的根都是挂载在“舞台”这个巨大的容器上面的，然后经过渲染就可以在 canvas中显示出来。它们的结构关系和 html 的 dom 树相似，二者可以类比，”大家“相互嵌套，有“父子子属关系”，有“兄弟并列关系”，有“层级上下关系”。因为有它们有相互嵌套的关系，所有就有了“容器”这样的存在。一个容器中可以添加精灵和元素，也可以添加另外一个容器。 ...
2019-11-15 12:01:49
1368
原创 PixiJS学习（2）添加一个位图纹理
简介：在所有的 2D（包括 3D） 渲染中都有 Texture 这样一个概念，翻译过来应该叫“纹理”。很多书籍或文章中对于它的解释五花八门，我个人的理解是：它是一个材质、贴图这样的概念。这里所说的位图就是我们常说的一张图片，一个 .png 或者 .jpg 图片。在原生的 canvas 中添加一张图片，我们使用的是 drawImage() 。可以对图片进行缩放和裁剪。https://...
2019-11-12 11:23:47
1806
原创 PixiJS学习 基础概念
介绍简介 Pixi是一款速度极快的2D Sprite渲染引擎。那是什么意思？这意味着它可以帮助您显示，制作和管理交互式图形，以便使用JavaScript和其他HTML5技术轻松制作动画，游戏和一些其他应用程序。 Pixi.js 是一个开源的HTML5 2D 渲染引擎，使用 WebGL 实现，不支持的浏览器会自动降低到 Canvas 实现。PixiJS 的目标是提供一个快速且轻量级的2...
2019-10-12 17:44:07
1039
原创 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
1585
原创 图片压缩小工具
使用tinypng进行图片压缩：使用nodejs执行即可const fs = require('fs');const path = require('path');const https = require('https');const crypto = require('crypto');const { URL} = require('url');const root ...
2019-10-12 16:09:11
116
原创 ffmpeg简单使用
基本命令查询支持格式ffmpeg -pix_fmts合并滤波https://blog.csdn.net/tkp2014/article/details/53310285视频处理查看视频信息ffmpeg -i file_name调整视频尺寸ffmpeg -i input_file -s 500x500 output_file转换视...
2019-03-29 13:38:26
210
转载 HTTP协议学习（3.消息结构）
HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。一个HTTP"客户端"是一个应用程序（Web浏览器或其他任何客户端），通过连接到服务器达到向服务器发送一个或多个HTTP的请求的目的。一个HTTP"服务器"同样也是一个应用程序（通常是一个Web服务，如Apache Web服务器或IIS服务器等），通过接收客户端的请求并向客户端发...
2018-08-20 13:55:52
151
原创 HTTP协议学习（2.URI和URL）
统一资源标志符URI就是在某一规则下能把一个资源独一无二地标识出来。拿人做例子，身份证号是URI。那统一资源定位符URL是什么呢。也拿人做例子//地球/中国/四川省/成都市/锦江区/晶蓝半岛B区1栋1单元1904/白鸽这个地址同样标识出了唯一的一个人，也起到了URI的作用，所以URL是URI的子集。URL是以描述人的位置来唯一确定一个人的。URIURI—Unif...
2018-08-20 13:43:31
261
原创 HTTP协议学习（1.简介）
前言HTTP 简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP 工作原理HTTP协议工作于客户端-服务端架构之上。浏览器作为...
2018-08-20 11:59:30
117
原创 MongoDB的学习（7）
了解MongoDB的分片分片的简介将数据库服务分布在多台服务器上的机制叫做分片，分片会增加基础设施的复杂性和部署维护的难度。分片的工作原理手动分片，例如：一个用户表，可以根据ID的奇偶，分别存储在不太的表格中人工分区大多数依赖于应用程序的代码来实现.MongoDB则实现来自动分区。数据分流数据分流是实现分片的很重要的一部分。区间分片 哈希分片 标签分片CHU...
2018-08-17 18:41:51
85
原创 MongoDB的学习（6）
了解MongoDB复制集可以集群部署多个 MongDB 服务器是 MongDB 数据库的特点之一。MongDB 经过复制之后在多个服务器都会有数据的赘余，可以防止数据的丢失。所以强烈建议在生产环境中使用 MongDB 的复制功能。复制集简介MongDB 提供了两种复制部署的方案：主从复制和副本集。两种方式的共同点都是只在一个主节点上进行写操作，然后写入的数据会异步地同步到所用的存...
2018-08-17 17:45:55
167
原创 MongoDB的学习（5）
MongoDB存储原理MongDB 存取读写速度很快，甚至可以用来当作缓存数据库。但是在使用工程中会发现MongoDB服务非常占内存，几乎是服务器有多少内存就会占用多少内存。存取工作流程我们都知道一台计算机的存储分为内存存储和硬盘存储。内存和硬盘都是存储器，内存和硬盘的区别是很大的。内存是半导体材料制作，特点为容量小，但是数据传送速度较快。硬盘是磁性材料制作，特点是存储容...
2018-07-25 14:33:58
217
原创 MongoDB的学习（4）
MongoDB的分布式运算模型MapReduceMongoDB的特点在于可以分布式部署，数据分散存储在不同的计算机中。这就导致了要对数据做比较，排序等运算都比较麻烦。为了解决这个问题，比较复杂的运算操作则采用了分布式的运算模型MapReduce。MapReduce简介：MapReduce是一种编程模型，一种分布式编程思想，尤其适合处理大数据。在下面举一个
2018-06-15 10:52:30
88
原创 Canvas 性能篇
Canvas 性能篇Canvas 想必前端同学们都不陌生，它是 HTML5 新增的「画布」元素，允许我们使用 JavaScript 来绘制图形。目前，所有的主流浏览器都支持 Canvas。Canvas 最常见的用途是渲染动画。渲染动画的基本原理，无非是反复地擦除和重绘。为了动画的流畅，留给我渲染一帧的时间，只有短短的 16ms。在这 16ms 中，我不仅需要处理一些游戏逻辑，计算每个对象的位置、状...
2018-06-12 16:33:05
674
原创 MongoDB的学习（3）
MongoDB的大文件存储规范GridFsGridFSMongoDB是支持二进制数据类型的，也就是能够存储文件。但是这里有个限制，单个BSON对象不能超过16MB，也就是说单个的文档的大小不能超过16MB。（1.7.2版本之前是4MB）GridFS是一种将大型文件存储在MongoDB数据库的文件规范。它的原理是，将一个大文件分成很多份满足BSON单文档限制的小文件来存储的。所有MongoDB官方支...
2018-06-05 17:09:12
99
原创 MongoDB的学习（2）
MongoDB的结构MongoDB的组成结构如下：数据库包括集合，集合包括文档，文档包含一个或者多个键值对。数据库：一个MongoDB的服务器实例可以承载多个数据库，而且数据库之间是相互独立的。数据库的命名应该符合文件的命名。MongoDB有一些自带的数据库：admin：超级管理员的数据库，添加用户权限，执行一些特定的服务端命令local：不能被复制，用来存储限于本地单台服务器的任意集合confi...
2018-06-05 16:42:59
103
原创 MongoDB的学习（1）
MongoDB的初识MongoDB的简介MongoDB的是当前的NoSQL数据中最热门的一种，是一种开源（目前免费），容易扩展，表结构自由，高性能且面向文档的数据库。MongoDB中的特点：数据文件的存储格式是BSON：一种JSON的扩展 面向集合存储，易于存储对象类型和JSON形式的数据 模式自由：一个集合（表）可以存储一个键值对（列）的文档（行），也可以存储多个键值对的...
2018-06-05 11:01:08
161
原创 git简单使用
git 命令一般步骤项目拉去步骤 git clone + 项目的ssh地址 在码云上拉去项目提交项目的一般步骤git pull从远程获取最新版本并merge到本地Already up-to-date.已经更新到最新版本git status 检查本地文件和线上文件的差异git add . 将所有都添加上去git commit -m “修改内容” 更新的备注git push o
2018-04-18 14:36:44
232
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人