@黄小泽的个人博客

历年工作中供职项目主管、高级前端开发工程师、前端部门经理，博客内容将专注于前端领域学习和经验分享

12月 11月 09月 08月 07月 06月 05月 04月 03月 01月

原创前端动画渲染引擎pixi.js系列（6）副本实现和平铺精灵TilingSprite

pixi.js系列（7）画布副本绘制、图片平铺效果的应用

2017-04-18 00:12:36 6947

原创前端动画渲染引擎pixi.js系列（7）粒子容器、遮罩层和滤镜的应用

一.粒子容器粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：new PIXI.particles.ParticleContain

2017-04-17 18:09:10 9411

原创前端动画渲染引擎pixi.js系列（5）Text文本和Graphics画笔工具

一.文本文本对象PIXI.Text是指创建一行或多行文字，可以使用'\n'来实现换行，文本对象PIXI.Text的继承关系是：PIXI.Text->PIXI.Sprite文本PIXI.Text的创建代码如下：var text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fi

2017-04-17 16:22:56 18146 4

原创前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

一.交互事件概念事件交互是指显示对象PIXI.Sprite、PIXI.Container与用户交互所触发的事件。常用的交互事件主要有如点击、拖拽等。在PixiJS中所触发的事件可以分为4种类型：鼠标左键触发，鼠标右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。二.交互事件参考1.鼠标左键触发事件：click：点击事件mousedown：鼠标按下mousemov

2017-04-17 11:32:52 18065 2

原创前端动画渲染引擎pixi.js系列（3）container和Sprite继承外专有的函数与方法

上篇介绍了基本显示对象PIXI.DisplayObject及该对象与Container、Sprite之间的继承关系，本篇将对Container、Sprite独有的函数与事件进行详细分析。一.容器PIXI.Container的[独有]参考函数与事件-----------------------------------------------------------------

2017-04-14 18:24:09 6223

原创前端动画渲染引擎pixi.js系列（2）container和Sprite的概念和继承关系

博主曾经有过2年的AS3开发经验，发现PixiJS框架与AS3有太多相似之处，就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友，对容器、精灵的概念应该都了然于胸了。一.container容器和Sprite精灵概念(1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类，即容器是用来管理多个精灵的显示对象。创建方法：var container

2017-04-14 17:57:27 9343 1

原创前端动画渲染引擎pixi.js系列（1）简单介绍及应用

做前端开发已经有一些年头了，最近忽然有个想法，想写一些现在仍然在迭代更新而且非常实用的前端框架的文章，毕竟个人需要记忆的东西太多，一是怕自己遗忘了，其次还是想分享一下自己的一些经验，希望能帮助到一些前端开发人员，如果是非常厉害的前端大牛，可以省略这些文章。一.PixiJS简介本次系列要介绍的前端框架是PixiJS，PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术

2017-04-14 16:47:30 11961 2