控件皮肤制作--九宫切图介绍

来源：互联网发布：ace python 编辑：程序博客网时间：2024/04/30 14:22

转自：http://bbs.cskin.net/thread-62-1-1.html

九宫切图在控件美化的时候会经常的用到比如：

最左边的是一个按钮的素材、、假设要把它做成一个按钮、、但是需要用的按钮是多大不确定的、总不能一个按钮做一张图吧？而如果直接对图片进行拉升什么的明显可以看到右边的两个看着怪别扭、于是乎这个时候九宫切图出场了

所谓九宫切图其实就是把图片分成九份然后绘制到相应的区域去

如上图将按钮是图片分成九个区域然后只需要将四角填充到目标区域其余的拉伸就可以了

如上图假设粉色区域是按钮的区域左上角是原图

先把原图的四个角取出来原封不动的绘制到目标区域的四个角去这样无论按钮多大什么的四个角都是没有拉伸过的所以看不出那里别扭

接下来就是四边了、、四边是不得不拉升的不然就没法玩了但是原图的上下两边左右拉升是没有啥问题原图的左右两边上下拉伸是没有问题的

剩下的中间区域没啥说的了直接拉升过去因为中间区域不像边缘有线条轮廓和圆角啥的一拉伸就变形了所以可以直接拉升

然后把刚才的全部合并起来就是

去掉参考线条和粉色背景就是

- -！、、不要纠结为嘛和原图颜色不一样我用算法重新处理过一次图形的、、

这样以来就可以把一个按钮拉伸到任意大小了但是注意不是啥图片都能进行九宫切图来操作比如你要那一个Hello Kitty来进行九宫切图估计会成变形金刚的、、

估计看了上面不用我解释也都能知道那些图才具备九宫切图的标准、、

还是贴一下代码吧

[C#] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
publicstatic void RenderBackground(Graphics g, Image img, Rectangle rect) {
    //填充四个角
    g.DrawImage(img,newRectangle(rect.X, rect.Y, 5, 5), 
        newRectangle(0, 0, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.Right - 5, rect.Y, 5, 5), 
        newRectangle(img.Width - 5, 0, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.X, rect.Bottom - 5, 5, 5), 
        newRectangle(0, img.Height - 5, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.Right - 5, rect.Bottom - 5, 5, 5), 
        newRectangle(img.Width - 5, img.Height - 5, 5, 5), GraphicsUnit.Pixel);
    //四边
    g.DrawImage(img,newRectangle(rect.X, rect.Y + 5, 5, rect.Height - 10), 
        newRectangle(0, 5, 5, img.Height - 10), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.X + 5, rect.Y, rect.Width - 10, 5), 
        newRectangle(5, 0, img.Width - 10, 5), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.Right - 5, rect.Y + 5, 5, rect.Height - 10), 
        newRectangle(img.Width - 5, 5, 5, img.Height - 10), GraphicsUnit.Pixel);
    g.DrawImage(img,newRectangle(rect.X + 5, rect.Bottom - 5, rect.Width - 10, 5), 
        newRectangle(5, img.Height - 5, img.Width - 10, 5), GraphicsUnit.Pixel);
    //中间
    g.DrawImage(img,
        newRectangle(rect.X + 5, rect.Y + 5, rect.Width - 10, rect.Height - 10), 
        newRectangle(5, 5, img.Width - 10, img.Height - 10), GraphicsUnit.Pixel);
 
}

为了方便我这里那个5是直接定死了的而通常情况下切图的参数更具情况而定、、思路在那里具体要怎么写由自己决定、、通常情况下我习惯把这个写在一个单独的Helper类中方便其他调用而假设要写控件就可以这样：

[C#] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
publicclass TestA : Control
{
    protectedoverride void OnPaint(PaintEventArgs e) {
        RenderHelper.RenderBackground(
            e.Graphics,
            Properties.Resources.Qbtn_Gray,//资源图
            this.ClientRectangle);
        base.OnPaint(e);
    }
}

这样一张图就变成了控件的背景了其实也相当的简单、、只是提出来说明一下而已事实上你看到的那些很好看的一些UI很多地方都有用到九宫切图比如刚才上面的按钮、、短信的气泡等、、比如下面的窗体：

窗体的圆角边框也是九宫切图贴上去的按钮就不说了

上面的抽屉式按钮(虽然抽屉的那个按钮用不着九宫三份就能搞定了但为了方便还是调用的同一个方法)

右边的tabcontrol的图元都是(没有合适的例子所以直接把以前搞过的东西翻出来了)

0 0