上海市城乡建设网站,杨凌企业网站建设,专业网站建设公司哪里济南兴田德润什么活动,app软件推广策略有哪些大家好#xff0c;我是前端西瓜哥。
pixijs 是一个强大的 Web Canvas 2D 库#xff0c;以其强大性能而著称。其底层使用了 WebGL 实现了硬件加速#xff0c;当然如果不支持的话#xff0c;也能回退为 Canvas。
本文使用的 pixijs 版本为 7.1.2。
Application
Applicati…大家好我是前端西瓜哥。
pixijs 是一个强大的 Web Canvas 2D 库以其强大性能而著称。其底层使用了 WebGL 实现了硬件加速当然如果不支持的话也能回退为 Canvas。
本文使用的 pixijs 版本为 7.1.2。
Application
Application 代表一个 pixijs 应用对应一个 Canvas。
创建一个 Application 实例
const app new PIXI.Application({ width: 640, height: 360 });支持的构造参数很多这里列举一些常用选项
width / height设置 Canvas 的宽高background背景色可以是数字或字符串默认为 0x000000即黑色view指定要应用的 Cavans 元素可以不提供pixijs 会给你创建一个新的你将它添加到 body 元素下就好resizeTo跟随某个容器元素的尺寸变化进行自适应比如 window。设置后 width / height 配置项目失效
更多高阶配置看 官方 API 文档。
这里我没有提供 view所以我们要将 pixijs 给我们生成的 Canvas 元素挂到页面上
document.body.appendChild(app.view);下面我们开始绘制图形。
Graphics
Graphics 类常用于绘制一些比较基础的图形比如矩形、圆形、线段等。除了绘制图形还可以用它来设置遮罩mask或点击区域hitArea。
在一个 Graphics 下不只是只能画一个图形也可以画多个图形。
绘制矩形
绘制红色填充色的矩形。
const rect new PIXI.Graphics();
rect.beginFill(0xFF0044); // 设置填充色
rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色
rect.drawRect(100, 100, 200, 100); // 参数分别为 x, y, width, height
// 添加到 stage 下
app.stage.addChild(rect);app.stage 是放置图形的地方也就是 “舞台”。这里我们要通过 addChild 将创建的图形加入进去之后 pixijs 的渲染器会读取到这个图形进行绘制。 drawRect 是一种旧的写法看起来是直接在画布上绘制矩形但其实底层是创建一个 Rect 对象添加到图形树上先不绘制然后在图形树准备好之后的渲染阶段再读取该对象的数据并且绘制。这和 CanvasRenderingContext2D.fillRect 属于不同的绘制机制后者不会维护图形树状态。
Graphics 本质并不是绘制工具而是构建树的工具绘制的实现在其他地方。
另一种写法首先创建 PIXI.Rectangle 实例这个实例只是描述一个矩形的属性本身并不能直接添加到 stage 上需要通过 Graphics 的 drawShape 添加到 Graphics 上。
const rect new PIXI.Graphics();
rect.beginFill(0xFF0044); // 设置填充色
rect.lineStyle(5, 0xFFFFFF); // 设置描边线宽和颜色
const s new PIXI.Rectangle(100, 100, 200, 100);
rect.drawShape(s);
// 记得添加到 stage 下
app.stage.addChild(rect);绘制圆形
绘制圆形同理
const circle new PIXI.Graphics();
circle.beginFill(0x00FF44);
circle.lineStyle(5, 0xFFFFFF);
// 参数cx中点, cy, radius
circle.drawCircle(100, 100, 50);app.stage.addChild(circle);效果 有种严重的锯齿感这是因为 pixijs 默认是不开抗锯齿的因为抗锯齿处理要消耗额外的性能。
可以开启全局的抗锯齿能力
const app new PIXI.Application({ antialias: true, /* 其他配置项 */ });开启抗锯齿后的圆形肉眼可见地圆润了 绘制圆角矩形
代码
const roundedRect new PIXI.Graphics();
roundedRect.beginFill(0xff0044);
roundedRect.lineStyle(5, 0xffffff);
// 参数为x, y, width, height, radius
roundedRect.drawRoundedRect(100, 100, 200, 100, 16);
// 添加到 stage 下
app.stage.addChild(roundedRect);效果 绘制椭圆
代码
const ellipse new PIXI.Graphics();
ellipse.beginFill(0xff0044);
ellipse.lineStyle(5, 0xffffff);
// 参数cx, cy, width, height
ellipse.drawEllipse(100, 100, 80, 40);
// 添加到 stage 下
app.stage.addChild(ellipse);效果 绘制线条
代码
const line new PIXI.Graphics();
line.lineStyle(5, 0xffffff);
line.moveTo(100, 100);
line.lineTo(300, 250);
// 添加到 stage 下
app.stage.addChild(line);效果 绘制多边形
代码
const polygon new PIXI.Graphics();
polygon.beginFill(0xff0044);
polygon.lineStyle(5, 0xffffff);
// x1, y1, x2, y2, ...
polygon.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到 stage 下
app.stage.addChild(polygon);效果 绘制三阶贝塞尔曲线
代码
const curve new PIXI.Graphics();
curve.beginFill(0xff0044);
curve.lineStyle(5, 0xffffff);
curve.moveTo(100, 180)
// cpX, cpY, cpX2, cpY2, toX, toY
curve.bezierCurveTo(90, 100, 210, 100, 300, 180)
// 添加到 stage 下
app.stage.addChild(curve);效果 结尾
本文主要讲了 pixijs 中一些基础图形的绘制写法。
我是前端西瓜哥欢迎关注我学习更多前端知识。
