一篇带给你Pixi.js 入门 （一）：绘制图形

简单入门 pixi.js。

公司主营业务：成都网站设计、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出乌苏免费做网站回馈大家。

pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。

该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力。如果不支持，会回退到 2D 模式，因为 2D 模式是上层的抽象，所以性能会差一些。

开始

首先创建一个 Application 实例。

我们使用 PIXI.Application 类创建一个新 PixiJS 应用。

import * as PIXI from "pixi.js";

const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// 绘制内容
// ...

该类可以传入配置对象，比如画布宽高（width / height）、背景色（backgroudColor，默认为黑色）、挂载的 canvas 元素（view，不提供 PixiJS 会创建一个）等。

app.view 可以得到 PixiJS 应用挂载的 Canvas 元素。

绘制图形

绘制图形需要先创建 Graphics 实例，然后调用其下的方法。

一个 Graphics 代表一个图形，当然也可以在单个 Graphics 绘制多个图形。

绘制红色矩形：

const rect = new PIXI.Graphics();

rect.beginFill(0xff0044); // 填充色
rect.lineStyle({ width: 2, color: 0x0000ff }); // 描边
rect.drawRect(10, 10, 100, 50);
rect.endFill();

app.stage.addChild(rect);

app.stage 是图形渲染的根节点，我们创建的 graphics 需要添加到 stage 下，这样才会被渲染出来。

绘制圆形：

const circle = new PIXI.Graphics();

circle.beginFill(0x00ff00);
circle.drawCircle(200, 10, 50);
circle.endFill();

app.stage.addChild(circle);

绘制精灵：

const bunny = PIXI.Sprite.from('examples/assets/bunny.png');

bunny.anchor.set(0.5); // 设置精灵图中心点

bunny.x = app.screen.width / 2; // 将精灵图绘制在画布正中央
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

绘制曲线不支持 SVG 的那种方便的 指令字符串 写法：

// 不支持
const trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z");

只能用类似原生 Canvas 写法那样，一步步绘制了。个人觉得很繁琐，指令字符串言简意赅多好的抽象。

const path = new PIXI.Graphics();
path.lineStyle({ width: 1, color: 0x0000ff });
path.moveTo(10, 10);
path.lineTo(20, 100);
path.bezierCurveTo(40, 120, 60, 120, 80, 100)
app.stage.addChild(path);

容器 Container

使用容器，可以将多个图形进行组合，然后在其上添加位移、旋转等属性，其下的图形会得到这些效果。

Container 不绘制图形，它组合图形，类似 SVG 的 group 元素。

const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);

结尾

一些基本的用法。

分享题目：一篇带给你Pixi.js 入门 （一）：绘制图形
转载来于：http://www.shufengxianlan.com/qtweb/news22/540822.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联