安装
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<body>
<script type="text/javascript">
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
PIXI.utils.sayHello(type)
</script>
</body>
</html>
image.png
概念介绍
Pixi应用
// 创建一个Pixi 应用
let app = new PIXI.Application({width: 256, height: 256});
// 把 Pixi 应用中创建出来的 canvas 添加到页面上
document.body.appendChild(app.view);
容器
容器是用来装载多个显示对象的， 它可以用 PIXI.Container() 方法来创建，而我们创建的 Pixi 应用的 stage 属性就是一个容器对象，它被当作根容器使用，它将包裹所有你想用 Pixi 显示的东西。
精灵
精灵是可以放在容器里的特殊图像对象。精灵是你能用代码控制图像的基础。你能够控制他们的位置，大小，和许多其他有用的属性来产生交互和动画。创建一个精灵需要用 PIXI.Sprite() 方法。
纹理
因为 Pixi 用 WebGL 和 GPU 去渲染图像，所以图像需要转化成 GPU 可以处理的格式。可以被 GPU 处理的图像被称作 纹理 。在你让精灵显示图片之前，需要将普通的图片转化成 WebGL 纹理。为了让所有工作执行的快速有效率，Pixi使用 纹理缓存 来存储和引用所有你的精灵需要的纹理。纹理的名称字符串就是图像的地址。这意味着如果你有从"images/cat.png" 加载的图像，你可以在纹理缓存中这样找到他：
PIXI.utils.TextureCache["images/cat.png"];
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>Pixi JS 置换滤镜效果</title>
<style>
.start-btn,
.stop-btn {
display: inline-block;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
outline: none;
padding: 10px 20px;
margin-bottom: 30px;
}
.start-btn {
background-color: #ff0081;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.stop-btn {
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
margin-left: 20px;
box-shadow: 0 2px 25px rgba(22, 217, 227, 0.5);
}
</style>
</head>
<body>
<div>
<button class="start-btn">开始</button>
<button class="stop-btn">停止</button>
</div>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script>
// 创建一个 Pixi应用 需要的一些参数
var option = {
width: 400,
height: 300,
transparent: true,
}
// 创建一个 Pixi应用
var app = new PIXI.Application(option);
// 获取渲染器
var renderer = app.renderer;
// 图片精灵
var preview;
// 置换图精灵
var displacementSprite;
// 滤镜
var displacementFilter;
// 舞台（一个容器），这里面包括了图片精灵、置换图精灵
var stage;
var playground = document.getElementById('px-render');
function setScene(url) {
// renderer.view 是 Pixi 创建的一个canvas
// 把 Pixi 创建的 canvas 添加到页面上
playground.appendChild(renderer.view);
// 创建一个容器
stage = new PIXI.Container();
// 根据图片的 url，创建图片精灵
preview = PIXI.Sprite.fromImage(url);
// 创建置换图精灵，在创建置换滤镜时会用到这个精灵
displacementSprite = PIXI.Sprite.fromImage('https://www.kkkk1000.com/images/learnPixiJS/sprite.png');
// 设置置换图精灵为平铺模式
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
// 创建一个置换滤镜
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
// 添加 图片精灵 到舞台
stage.addChild(preview);
// 添加 置换图精灵 到舞台
stage.addChild(displacementSprite);
// 把 stage 添加到根容器上
app.stage.addChild(stage);
}
// 置换图精灵的移动速度
var velocity = 1;
// raf 是调用 requestAnimationFrame方法的返回值，停止动画效果时需要用到
var raf;
function animate() {
raf = requestAnimationFrame(animate);
// 改变置换图精灵的位置
displacementSprite.x += velocity;
displacementSprite.y += velocity;
}
setScene('https://www.kkkk1000.com/images/learnPixiJS/view.jpg');
var start = document.querySelector('.start-btn');
var stop = document.querySelector('.stop-btn');
start.onclick = function () {
// 设置舞台的滤镜
stage.filters = [displacementFilter];
// 开始动画
animate();
}
stop.onclick = function () {
// 取消滤镜
stage.filters = [];
// 停止动画
cancelAnimationFrame(raf);
}
</script>
</body>
</html>
参考链接：https://segmentfault.com/a/1190000017150623?utm_source=tag-newest
设置精灵位置
sprite.position.set(x, y)
大小和比例
懒得写了，直接放中文文档吧
https://www.bookstack.cn/read/LearningPixi/sizenscale
网友评论