- 浏览: 425306 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
1、基本图形
使用图像纹理是制作精灵的最有用的方法之一,但Pixi也有自己的低级绘图工具。您可以使用它们来制作矩形,形状,线条,复杂的多边形和文本。并且,幸运的是,它使用与Canvas绘图API几乎相同的API,所以,如果你已经熟悉canvas,这里没有什么真正新的学习。但是最大的优点是,与Canvas绘图API不同,您使用Pixi绘制的形状是由GPU上的WebGL渲染的。Pixi允许您访问所有未使用的性能功率。让我们快速浏览如何制作一些基本形状。这里是我们将在代码中提出的所有形状。
(1)矩形
所有形状都是先创建 Pixi 的 Graphics 实例来实现
使用 beginFill 十六进制代码值填充矩形的内部颜色,填充浅蓝色如下:
如果你想给形状一个外边框,使用lineStyle方法。这里是如何给矩形一个4像素宽的红色轮廓,alpha 值为1。
使用drawRect方法来绘制矩形。它的四个参数x,y,width和height。
完成后需要调用endFill方法
它就像Canvas绘图API!这里是所有的代码,你需要绘制一个矩形,改变其位置,并将其添加到舞台上。
此代码使用一个64 x 64的蓝色矩形,其红色边框的x和y位置为170。
(2) 圆形
使用drawCircle方法创建一个圆。它的三个论点是 x,y和radius
与矩形和子画面不同,圆的x和y位置也是其中心点。以下是如何制作一个半径为32像素的紫色圆圈。
(3)椭圆
作为一个在画布绘图API,Pixi允许你用该drawEllipse方法绘制一个椭圆。
x / y位置定义椭圆的左上角(假设椭圆被一个不可见的矩形边框包围 - 该框的左上角将表示椭圆的x / y锚点位置)。这是一个黄色椭圆形,宽50像素,高20像素。
(4) 圆角矩形
Pixi还允许你使用drawRoundedRect 方法做圆角矩形。最后一个参数cornerRadius是一个以像素为单位的数字,用于确定角点应舍入多少。
以下是如何制作一个圆角矩形,圆角半径为10像素。
(5)直线
你在上面的例子中看到,该lineStyle方法允许你定义一行。您可以使用moveTo和lineTo方法来绘制线的起点和终点,就像使用Canvas Drawing API一样。这里是如何绘制一个4像素宽,白色对角线。
PIXI.Graphics对象,像线,有x和y值,就像精灵,所以你可以将它们放置在舞台上的任何地方,当你绘制它们。
(6)多边形
您可以将线连接在一起并使用颜色填充它们,以使用该drawPolygon方法来创建复杂的形状。drawPolygon的参数是一个x / y点的路径数组,用于定义形状上每个点的位置。
drawPolygon将这三个点合在一起做出形状。以下是如何使用drawPolygon将三条线连接在一起,制作一个带有蓝色边框的红色三角形。三角形在位置0,0处绘制,然后使用其x和y属性移动到舞台上的位置 。
(6)显示文本
使用Textobject(PIXI.Text)在舞台上显示文本。构造函数接受两个参数:要显示的文本和定义字体属性的样式对象。这里是如何显示单词“Hello Pixi”,在白色,32像素高Arial字体。
PIXI的文本对象从继承Sprite类,所以它们包含都喜欢相同的属性x,y,width,height, alpha,和rotation。在舞台上定位和调整文本大小,就像你会有任何其他sprite。
如果要在创建文本对象后更改其内容,请使用该text属性。
style如果要重新定义字体属性,请使用属性。
Pixi通过使用Canvas绘图API将文本渲染为不可见和临时的画布元素来创建文本对象。它然后将画布变成WebGL纹理,以便它可以映射到精灵。这就是为什么文本的颜色需要包装在一个字符串:它是一个Canvas绘图API颜色值。与任何画布颜色值一样,您可以使用常用颜色(例如“红色”或“绿色”)或使用rgba,hsla或十六进制值。
您可以包括的其他样式属性包括stroke字体轮廓颜色和strokeThickness轮廓粗细。将文本的dropShadow属性设置true为使文本显示阴影。使用dropShadowColor设置阴影的十六进制颜色值,可以使用dropShadowAngle设置阴影的弧度角度,并使用dropShadowDistance设置阴影的像素高度。还有更多:查看Pixi的文本文档的完整列表。
Pixi也可以包装长行的文本。将文本的wordWrap样式属性设置为true,然后设置wordWrapWidth为文本行应为的最大长度(以像素为单位)。使用该align属性设置多行文本的对齐方式。
(注意:align不影响单行文本。)
如果要使用自定义字体文件,请使用CSS @font-face规则将字体文件链接到运行Pixi应用程序的HTML页面。
将此@font-face规则添加到HTML页面的CSS样式表。
Pixi还支持位图字体。您可以使用Pixi的加载器加载位图字体XML文件,就像加载JSON或图像文件一样。
使用图像纹理是制作精灵的最有用的方法之一,但Pixi也有自己的低级绘图工具。您可以使用它们来制作矩形,形状,线条,复杂的多边形和文本。并且,幸运的是,它使用与Canvas绘图API几乎相同的API,所以,如果你已经熟悉canvas,这里没有什么真正新的学习。但是最大的优点是,与Canvas绘图API不同,您使用Pixi绘制的形状是由GPU上的WebGL渲染的。Pixi允许您访问所有未使用的性能功率。让我们快速浏览如何制作一些基本形状。这里是我们将在代码中提出的所有形状。
(1)矩形
所有形状都是先创建 Pixi 的 Graphics 实例来实现
var rectangle = new Graphics();
使用 beginFill 十六进制代码值填充矩形的内部颜色,填充浅蓝色如下:
rectangle.beginFill(0x66CCFF);
如果你想给形状一个外边框,使用lineStyle方法。这里是如何给矩形一个4像素宽的红色轮廓,alpha 值为1。
rectangle.lineStyle(4, 0xFF3300, 1);
使用drawRect方法来绘制矩形。它的四个参数x,y,width和height。
rectangle.drawRect(x, y, width, height);
完成后需要调用endFill方法
rectangle.endFill();
它就像Canvas绘图API!这里是所有的代码,你需要绘制一个矩形,改变其位置,并将其添加到舞台上。
var rectangle = new Graphics(); rectangle.lineStyle(4, 0xFF3300, 1); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 64, 64); rectangle.endFill(); rectangle.x = 170; rectangle.y = 170; stage.addChild(rectangle);
此代码使用一个64 x 64的蓝色矩形,其红色边框的x和y位置为170。
(2) 圆形
使用drawCircle方法创建一个圆。它的三个论点是 x,y和radius
drawCircle(x, y, radius)
与矩形和子画面不同,圆的x和y位置也是其中心点。以下是如何制作一个半径为32像素的紫色圆圈。
var circle = new Graphics(); circle.beginFill(0x9966FF); circle.drawCircle(0, 0, 32); circle.endFill(); circle.x = 64; circle.y = 130; stage.addChild(circle);
(3)椭圆
作为一个在画布绘图API,Pixi允许你用该drawEllipse方法绘制一个椭圆。
drawEllipse(x, y, width, height);
x / y位置定义椭圆的左上角(假设椭圆被一个不可见的矩形边框包围 - 该框的左上角将表示椭圆的x / y锚点位置)。这是一个黄色椭圆形,宽50像素,高20像素。
var ellipse = new Graphics(); ellipse.beginFill(0xFFFF00); ellipse.drawEllipse(0, 0, 50, 20); ellipse.endFill(); ellipse.x = 180; ellipse.y = 130; stage.addChild(ellipse);
(4) 圆角矩形
Pixi还允许你使用drawRoundedRect 方法做圆角矩形。最后一个参数cornerRadius是一个以像素为单位的数字,用于确定角点应舍入多少。
drawRoundedRect(x, y, width, height, cornerRadius)
以下是如何制作一个圆角矩形,圆角半径为10像素。
var roundBox = new Graphics(); roundBox.lineStyle(4, 0x99CCFF, 1); roundBox.beginFill(0xFF9933); roundBox.drawRoundedRect(0, 0, 84, 36, 10) roundBox.endFill(); roundBox.x = 48; roundBox.y = 190; stage.addChild(roundBox);
(5)直线
你在上面的例子中看到,该lineStyle方法允许你定义一行。您可以使用moveTo和lineTo方法来绘制线的起点和终点,就像使用Canvas Drawing API一样。这里是如何绘制一个4像素宽,白色对角线。
var line = new Graphics(); line.lineStyle(4, 0xFFFFFF, 1); line.moveTo(0, 0); line.lineTo(80, 50); line.x = 32; line.y = 32; stage.addChild(line);
PIXI.Graphics对象,像线,有x和y值,就像精灵,所以你可以将它们放置在舞台上的任何地方,当你绘制它们。
(6)多边形
您可以将线连接在一起并使用颜色填充它们,以使用该drawPolygon方法来创建复杂的形状。drawPolygon的参数是一个x / y点的路径数组,用于定义形状上每个点的位置。
var path = [ point1X, point1Y, point2X, point2Y, point3X, point3Y ]; graphicsObject.drawPolygon(path);
drawPolygon将这三个点合在一起做出形状。以下是如何使用drawPolygon将三条线连接在一起,制作一个带有蓝色边框的红色三角形。三角形在位置0,0处绘制,然后使用其x和y属性移动到舞台上的位置 。
var triangle = new Graphics(); triangle.beginFill(0x66FF33); //Use `drawPolygon` to define the triangle as //a path array of x/y positions triangle.drawPolygon([ -32, 64, //First point 32, 64, //Second point 0, 0 //Third point ]); //Fill shape's color triangle.endFill(); //Position the triangle after you've drawn it. //The triangle's x/y position is anchored to its first point in the path triangle.x = 180; triangle.y = 22; stage.addChild(triangle);
(6)显示文本
使用Textobject(PIXI.Text)在舞台上显示文本。构造函数接受两个参数:要显示的文本和定义字体属性的样式对象。这里是如何显示单词“Hello Pixi”,在白色,32像素高Arial字体。
var message = new Text( "Hello Pixi!", {fontFamily: "Arial", fontSize: 32, fill: "white"} ); message.position.set(54, 96); stage.addChild(message);
PIXI的文本对象从继承Sprite类,所以它们包含都喜欢相同的属性x,y,width,height, alpha,和rotation。在舞台上定位和调整文本大小,就像你会有任何其他sprite。
如果要在创建文本对象后更改其内容,请使用该text属性。
message.text = "Text changed!";
style如果要重新定义字体属性,请使用属性。
message.style = {fill: "black", font: "16px PetMe64"};
Pixi通过使用Canvas绘图API将文本渲染为不可见和临时的画布元素来创建文本对象。它然后将画布变成WebGL纹理,以便它可以映射到精灵。这就是为什么文本的颜色需要包装在一个字符串:它是一个Canvas绘图API颜色值。与任何画布颜色值一样,您可以使用常用颜色(例如“红色”或“绿色”)或使用rgba,hsla或十六进制值。
您可以包括的其他样式属性包括stroke字体轮廓颜色和strokeThickness轮廓粗细。将文本的dropShadow属性设置true为使文本显示阴影。使用dropShadowColor设置阴影的十六进制颜色值,可以使用dropShadowAngle设置阴影的弧度角度,并使用dropShadowDistance设置阴影的像素高度。还有更多:查看Pixi的文本文档的完整列表。
Pixi也可以包装长行的文本。将文本的wordWrap样式属性设置为true,然后设置wordWrapWidth为文本行应为的最大长度(以像素为单位)。使用该align属性设置多行文本的对齐方式。
message.style = {wordWrap: true, wordWrapWidth: 100, align: center};
(注意:align不影响单行文本。)
如果要使用自定义字体文件,请使用CSS @font-face规则将字体文件链接到运行Pixi应用程序的HTML页面。
@font-face { font-family: "fontFamilyName"; src: url("fonts/fontFile.ttf"); }
将此@font-face规则添加到HTML页面的CSS样式表。
Pixi还支持位图字体。您可以使用Pixi的加载器加载位图字体XML文件,就像加载JSON或图像文件一样。
发表评论
-
webpack4 - 安装
2019-04-15 17:50 0webpack4 安装 -
项目中使用webpack5
2017-11-26 16:40 1605近期react及vueJs的普及,ES6也有相应的推广及普及, ... -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 989案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1866你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 14761、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1409你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 57981、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 60961、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 36391、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1925嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2708XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 8013CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1520同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1871压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2255JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1940摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1704一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1273表单元素类型 常用:tel, email, date, url ... -
HTML5 WebSocket
2012-06-02 11:12 25231.WebSocket的优缺点 大 ...
相关推荐
6. **自定义滤镜**:Pixi-filters还允许开发者创建自己的滤镜,通过定义着色器代码实现特定的图形处理效果。 在实际项目中,pixi-filters可以帮助前端开发者轻松实现各种视觉特效,提升用户体验。同时,由于其高效...
《整合PIXI与PIXI-SPINE于Vue.js:实现高效动画渲染》 在现代Web开发中,Vue.js因其易用性和灵活性而受到广大开发者喜爱。同时,对于2D游戏和交互式应用,PIXI.js库以其强大的图形处理能力成为首选。而PIXI-SPINE...
pixi-multistyle-text 添加MultiStyleText对象内部使用不同的风格很容易地创建文本。 例子 在下面的示例中,我们定义了4种文本样式。 default是文本的默认样式,其他样式与文本内的标签匹配。 let text = new ...
pixi-spine, 支持脊椎支持的Pixi.js 插件 pixi脊椎 pixi v3和 pixi v4的脊椎实现。用法预生成的文件如果只包含生成的文件,pixi脊椎将自身添加到pixi命名空间中:new PIXI.spine.Spine();基本示例var app
pixi-movieclip-speed 根据当前浏览器的fps速率动态调整PIXI movieclip的动画速度。 当PIXI movieclip动画速度设置在0到1之间时,假定您的浏览器始终以60fps运行。 想象一下,精灵表格动画以24fps导出并且动画速度...
Pixi-Pan-and-Zoom 这是什么: 关于如何在 PixiJS 中实现平移和缩放的快速且有些简洁的示例 建立在这些想法的基础上并使示例更好的好地方 旨在帮助从 KineticJS 迁移到 PixiJS,为 这不是什么: 没有依赖管理。 ...
筛选预习调整滤镜@ pixi / filter-adjustment AdvancedBloomFilter @ pixi / filter-advanced-bloom AsciiFilter @ pixi / filter-ascii 斜角过滤器@ pixi / filter-bevel BloomFilter @ pixi / filter-bloom ...
pixi v5的压缩纹理和视网膜支持。 加载程序可以根据平台和渲染模式选择纹理。 您可以将早期版本与PixiJS v4一起使用-v4.xnpm版本1.1.8 支持DDS(S3TC DXT1-3-5,ATC,ATCA / ATC显式,ATCI / ATC内插),PVR...
将缩小的文件安装到node_modules/pixi-after-effects/dist/pixi-ae.js 演示 参见 或按照以下步骤运行计算机 yarn install # install dependencies yarn server # start simply server by webpack-dev-server ...
从pixi-viewport v3迁移到v4 视口需要导入或要求如下: import { Viewport } from 'pixi-viewport'// orconst Viewport = require ( 'pixi-viewport' ) . Viewport 插件已移至其自己的对象: // viewport....
pixi-live2d-display v5的Live2D集成。 该项目旨在成为Web平台上的通用Live2D框架。 尽管正式的Live2D框架非常复杂且有问题,但该项目已对其进行了重写,以统一和简化API,这使您无需了解内部系统的工作原理就可以在...
相反,pixi-multistyle-text基于文本的内容创建单个位图图形。 从外观上讲,它们非常相似,但是,创建多个Text对象的开销要大得多,这使RichText成为潜在的非常繁重的组件。 如果需要最高性能,请考虑使用 。 生命...
pixi-typescript-样板 带有初学者友好模板 强调 :Japanese_symbol_for_beginner: - 初学者友好。 :hammer_and_wrench: - 打字稿 + 巴别塔。 :airplane: - 实时重新加载。 :rocket: - 极快的捆绑时间 :memo: - ...
pixi-inspector, Pixi.js的Chrome 开发人员工具 Pixi检查器用于检查 Pixi.js 游戏/应用程序的Chrome DevTools的扩展。安装安装( Chrome 网络存储中的Pixi检查器) [ https://chrome.google.com/webstore/deta
在“pixi.js-practice”项目中,你可能会遇到如何创建精灵(sprites)、纹理(textures)、图形(graphics)和容器(containers)等基本元素的学习和实践。精灵是游戏中的基本组件,通常代表游戏对象,如角色或道具...
元素,根据PIXI-DisplayObject给出的转换,该元素位于舞台的上方。 该框在PIXI平台上绘制。 此外,您可以选择当文本字段没有焦点时,插件是否应使用本机pixi-Text替换<input> 。 演示版 正在安装 在dist/PIXI....
pixi型脚本样板带有初学者友好模板强调 :Japanese_symbol_for_beginner: -初学者友好。...用法单击仓库上方的绿色按钮“使用此模板”,或只需复制粘贴并开始编码git clone --depth=1 --branch=master ...
3. **可扩展性**:Pixi.js提供了一个灵活的架构,允许开发者通过自定义Shader或扩展基本图形类来实现复杂的图形效果。 4. **跨平台兼容**:除了WebGL,Pixi.js还支持canvas渲染,以确保在不支持WebGL的浏览器中也能...
pixi-nwjs-启动器使用pixiJS v5和适用于桌面x64的Node-Webkit SDK的示例应用程序。特征包括基本的package.json + jsconfig.json + index.html + launch.json 。 Node和v8包含在引擎中,无需依赖。 使用PIXIv5的基本...