PixiJS学习（2）添加一个位图纹理

简介：

在所有的 2D（包括 3D） 渲染中都有 Texture 这样一个概念，翻译过来应该叫“纹理”。很多书籍或文章中对于它的解释五花八门，我个人的理解是：它是一个材质、贴图这样的概念。

这里所说的位图就是我们常说的一张图片，一个 .png 或者 .jpg 图片。

在原生的 canvas 中添加一张图片，我们使用的是 drawImage() 。可以对图片进行缩放和裁剪。

https://www.jianshu.com/p/ded27b13c230

 

添加一个图片：

// 使用 vue 语法
// 构建一个纹理
this.textures = PIXI.Texture.from('images/1.png')
// 将纹理添加到精灵当中
this.imgA = new PIXI.Sprite(this.textures);
// 设置锚点
//this.imgA.anchor.x = 0.5;
//this.imgA.anchor.y = 0.5;
this.imgA.anchor.set(0.5);
// 设置尺寸比例
// this.imgA.scale.x = -0.5;
// this.imgA.scale.y = 0.5;
this.imgA.scale.set(0.5);
//设置角度
this.imgA.rotation = Math.PI/3;// 旋转 60 度
//设置位置
this.imgA.x = 0;
this.imgA.y = 0;
// this.imgA.x = Math.random() * this.frameStage.screen.width; // 根据渲染场景大小取随机数
// this.imgA.y = Math.random() * this.frameStage.screen.height;

console.log(this.imgA);
// 将这个精灵添加到整舞台
this.frameStage.stage.addChild(this.imgA);

 

上面这段代码到整个过程是：

• 将一张图片构建为一个纹理，PIXI.Texture.from；
• 将纹理添加到精灵当中，new PIXI.Sprite(textures)；
• 设置精灵到各种属性；
• 将精灵添加到整个舞台当中显示；

基础属性：

锚点：

可以简单的理解为一个精灵的作用点或者说是质点。包括设置位置，旋转……一系列基础属性的作用点。

对于锚点的设置，从实现的角度可以设置为任何位置。有两种设置方法：

• 使用 set 方法，anchor.set(0.5)。 0.5 表示精灵中心，0 表示左上角，1 表示右下角;
• 设置对应属性：anchor.x = 0.5，anchor.y = 0.5；同上 set(0.5);

尺寸：

这个就是长和宽的缩放值，可以实现等比缩放。而且可以设置为负数，实现对称镜像操作。

对于锚点的设置，有两种设置方式：

• 使用 set 方法：scale.set(0.5);
• 设置对应属性：scale.x = 0.5，scale.y = 0.5;同上scale.set(0.5);

角度：

它就是图片的旋转角度，它的作用点就是锚点；

对于角度的设置就是直接改变数字：这个角度是弧度值，不是传统的360度，

360 = Math.PI * 2;

位置：

它就是图片的 X 轴和 Y 轴的坐标值，作用点是锚点。它的坐标值是基于父坐标的。上面精灵的父容器是整个舞台，因此是从左上角开始算的；

单位是 px 也就是根据 canvas 的分辨率来算的；