我们有这样的图像:
我们有 4 个坐标 top:10, bottom:10, left:10, right:10 我们已经调整到像 newWidth:100, newHeight:35 这样的值 我们有一些SDL_Rect Sprite
是从一些SDL_Surface *button
如何在 Sprite 上执行这样的调整大小转换生成的?
那么如何在 SDL 中实现 9-slice 缩放呢?
我们有这样的图像:
我们有 4 个坐标 top:10, bottom:10, left:10, right:10 我们已经调整到像 newWidth:100, newHeight:35 这样的值 我们有一些SDL_Rect Sprite
是从一些SDL_Surface *button
如何在 Sprite 上执行这样的调整大小转换生成的?
那么如何在 SDL 中实现 9-slice 缩放呢?
我在这里使用c和sdl-2制作了一个演示项目执行 9 切片渲染:https ://github.com/cxong/sdl2-9-slice
看看这个render()
功能,如果你愿意,可以复制它——它是经过许可的。
关键是要使用srcrect
和dstrect
参数SDL_RenderCopy()
——前者是要渲染到源纹理的哪一部分,后者是要渲染到目的地(渲染目标)的哪一部分。
对于 9 切片,角按原样复制;对于中间部分,取决于您想要渲染的方式 - 拉伸或重复 -srcrect
将是相同的,但dstrect
会拉伸或重复。
另一件事是SDL 不做纹理重复(还)。所以如果你想渲染为重复模式,你需要使用循环。
这是项目终止时的功能:
int render(
SDL_Renderer *renderer, SDL_Surface *s, SDL_Texture *t,
int x, int y, int top, int bottom, int left, int right, int w, int h,
bool repeat)
{
const int srcX[] = {0, left, s->w - right};
const int srcY[] = {0, top, s->h - bottom};
const int srcW[] = {left, s->w - right - left, right};
const int srcH[] = {top, s->h - bottom - top, bottom};
const int dstX[] = {x, x + left, x + w - right, x + w};
const int dstY[] = {y, y + top, y + h - bottom, y + h};
const int dstW[] = {left, w - right - left, right};
const int dstH[] = {top, h - bottom - top, bottom};
SDL_Rect src;
SDL_Rect dst;
for (int i = 0; i < 3; i++)
{
src.x = srcX[i];
src.w = srcW[i];
dst.w = repeat ? srcW[i] : dstW[i];
for (dst.x = dstX[i]; dst.x < dstX[i + 1]; dst.x += dst.w)
{
if (dst.x + dst.w > dstX[i + 1])
{
src.w = dst.w = dstX[i + 1] - dst.x;
}
for (int j = 0; j < 3; j++)
{
src.y = srcY[j];
src.h = srcH[j];
dst.h = repeat ? srcH[j] : dstH[j];
for (dst.y = dstY[j]; dst.y < dstY[j + 1]; dst.y += dst.h)
{
if (dst.y + dst.h > dstY[j + 1])
{
src.h = dst.h = dstY[j + 1] - dst.y;
}
const int res = SDL_RenderCopy(renderer, t, &src, &dst);
if (res != 0)
{
return res;
}
}
}
}
}
return 0;
}