`
haiyupeter
  • 浏览: 425306 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

PIXI 基本图形-PIXI文档翻译(6)

 
阅读更多
1、基本图形
使用图像纹理是制作精灵的最有用的方法之一,但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或图像文件一样。
  • 大小: 1.6 KB
  • 大小: 3 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics