简介:
在所有的 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 的分辨率来算的;