🇨🇳 中文 (Chinese - China)
🇨🇳 中文 (Chinese - China)
外观
🇨🇳 中文 (Chinese - China)
🇨🇳 中文 (Chinese - China)
外观
本页面基于这个版本编写:
1.20.4
本页面基于这个版本编写:
1.20.4
本文假设您已经看过基本渲染概念。
DrawContext
是控制渲染的核心类。 它提供了诸多渲染图形、文字、纹理的方法,此外还用来操纵 MatrixStack
和 BufferBuilder
。
使用 DrawContext
绘制矩形十分容易。 如果您想绘制三角形或其他不规则图形,您需要使用 BufferBuilder
手动添加图形顶点信息。
您可以使用 DrawContext#fill
方法来绘制一个实心矩形。
int rectangleX = 10;
int rectangleY = 10;
int rectangleWidth = 100;
int rectangleHeight = 50;
// x1, y1, x2, y2, color
context.fill(rectangleX, rectangleY, rectangleX + rectangleWidth, rectangleY + rectangleHeight, 0xFF0000FF);
假设我们想勾勒出我们刚才绘制的矩形的轮廓。 我们可以使用 DrawContext#drawBorder
方法来绘制轮廓。
// x, y, width, height, color
context.drawBorder(rectangleX, rectangleY, rectangleWidth, rectangleHeight, 0xFFFF0000);
我们可以使用 DrawContext#drawHorizontalLine
和 DrawContext#drawVerticalLine
来绘制线条。
// Let's split the rectangle in half using a green line.
// x, y1, y2, color
context.drawVerticalLine(rectangleX + rectangleWidth / 2, rectangleY, rectangleY + rectangleHeight, 0xFF00FF00);
DrawContext
有一套内建的裁剪功能。 它可以用来裁剪渲染区域。 这个功能在绘制某些元素时十分有用,比如悬浮提示,或者其他不应该超出指定渲染区域的界面元素。
TIP
裁剪区域可以内嵌! 但是请一定配对 enableScissor
和 disableScissor
,否则错误的裁剪区域将影响到其他界面元素。
要启用裁剪功能,只需调用 DrawContext#enableScissor
方法。 同样地,调用 DrawContext#disableScissor
方法以禁用裁剪功能。
// Let's create a scissor region that covers a middle bar section of the screen.
int scissorRegionX = 200;
int scissorRegionY = 20;
int scissorRegionWidth = 100;
// The height of the scissor region is the height of the screen minus the height of the top and bottom bars.
int scissorRegionHeight = this.height - 40;
// x1, y1, x2, y2
context.enableScissor(scissorRegionX, scissorRegionY, scissorRegionX + scissorRegionWidth, scissorRegionY + scissorRegionHeight);
// Let's fill the entire screen with a color gradient, it should only be visible in the scissor region.
// x1, y1, x2, y2, color1, color2
context.fillGradient(0, 0, this.width, this.height, 0xFFFF0000, 0xFF0000FF);
// Disable the scissor region.
context.disableScissor();
如您所见,即使我们让游戏尝试用渐变色铺满整个界面,它却只能在裁剪区域内绘制。
注意,不存在唯一“正确”的绘制纹理的方法,因为 drawTexture
有很多重载。 本节内容只会涵盖最常用的方法。
一般来说,我们推荐您使用需要指定 textureWidth
和 textureHeight
参数的 drawTexture
方法重载。 因为如果使用不指定的重载, DrawContext
会假设您的纹理文件尺寸是 256x256,而您的纹理文件不一定是这个尺寸,于是渲染结果就不一定正确。
Identifier texture = Identifier.of("minecraft", "textures/block/deepslate.png");
// texture, x, y, u, v, width, height, textureWidth, textureHeight
context.drawTexture(texture, 90, 90, 0, 0, 16, 16, 16, 16);
在这个情形中,我们需要指定纹理区域的 u
和 v
。 这俩参数用于指定纹理区域左上角的坐标。另外,regionWidth
和 regionHeight
参数用于指定纹理区域的尺寸。
我们以此纹理为例。
如果我们只希望绘制包含放大镜的区域,我们可以使用如下 u
、v
、regionWidth
、regionHeight
值:
Identifier texture2 = Identifier.of("fabric-docs-reference", "textures/gui/test-uv-drawing.png");
int u = 10, v = 13, regionWidth = 14, regionHeight = 14;
// texture, x, y, width, height, u, v, regionWidth, regionHeight, textureWidth, textureHeight
context.drawTexture(texture2, 90, 190, 14, 14, u, v, regionWidth, regionHeight, 256, 256);
DrawContext
提供了许多不言自明的渲染文字的方法,您可以自行尝试,此处不再赘述。
假设我们想在界面上绘制 Hello World
。 我们可以使用 DrawContext#drawText
方法来完成。
// TextRenderer, text (string, or Text object), x, y, color, shadow
context.drawText(client.textRenderer, "Hello, world!", 10, 200, 0xFFFFFFFF, false);