作者: 乔克斯
查看: 15167|回复: 19

【九宫切图】什么是九宫绘图,九宫格绘法

[复制链接]
乔克斯 发表于 2014-7-21 11:49:06 | 显示全部楼层 |阅读模式
查看: 15167|回复: 19
九宫切图介绍

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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

最左边的是一个按钮的素材、、假设要把它做成一个按钮、、但是 需要用的按钮是多大不确定的、总不能一个按钮做一张图吧?而如果直接对图片进行拉升什么的 明显可以看到右边的两个看着怪别扭、于是乎 这个时候九宫切图出场了
所谓九宫切图 其实就是把图片分成九份然后绘制到相应的区域去

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

如上图 假设粉色区域是 按钮的区域 左上角是原图
先把原图的四个角取出来 原封不动的 绘制到目标区域的四个角去这样 无论按钮多大什么的 四个角都是没有拉伸过的 所以看不出那里别扭
接下来就是四边了、、四边是不得不拉升的 不然就没法玩了但是 原图的上下两边左右拉升是没有啥问题 原图的左右两边上下拉伸是没有问题的

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法


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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法

- -!、、不要纠结为嘛和原图颜色不一样 我用算法重新处理过一次图形的、、
这样以来 就可以把一个按钮拉伸到任意大小了 但是注意 不是啥图片都能进行九宫切图来操作 比如你要那一个Hello Kitty来进行九宫切图 估计会成变形金刚的、、
估计看了上面不用我解释 也都能知道那些图才具备九宫切图的标准、、
还是贴一下代码吧

[C#] 纯文本查看 复制代码
public static void RenderBackground(Graphics g, Image img, Rectangle rect) {
    //填充四个角
    g.DrawImage(img, new Rectangle(rect.X, rect.Y, 5, 5), 
        new Rectangle(0, 0, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.Right - 5, rect.Y, 5, 5), 
        new Rectangle(img.Width - 5, 0, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.X, rect.Bottom - 5, 5, 5), 
        new Rectangle(0, img.Height - 5, 5, 5), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.Right - 5, rect.Bottom - 5, 5, 5), 
        new Rectangle(img.Width - 5, img.Height - 5, 5, 5), GraphicsUnit.Pixel);
    //四边
    g.DrawImage(img, new Rectangle(rect.X, rect.Y + 5, 5, rect.Height - 10), 
        new Rectangle(0, 5, 5, img.Height - 10), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.X + 5, rect.Y, rect.Width - 10, 5), 
        new Rectangle(5, 0, img.Width - 10, 5), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.Right - 5, rect.Y + 5, 5, rect.Height - 10), 
        new Rectangle(img.Width - 5, 5, 5, img.Height - 10), GraphicsUnit.Pixel);
    g.DrawImage(img, new Rectangle(rect.X + 5, rect.Bottom - 5, rect.Width - 10, 5), 
        new Rectangle(5, img.Height - 5, img.Width - 10, 5), GraphicsUnit.Pixel);
    //中间
    g.DrawImage(img, 
        new Rectangle(rect.X + 5, rect.Y + 5, rect.Width - 10, rect.Height - 10), 
        new Rectangle(5, 5, img.Width - 10, img.Height - 10), GraphicsUnit.Pixel);

}


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



[C#] 纯文本查看 复制代码
public class TestA : Control
{
    protected override void OnPaint(PaintEventArgs e) {
        RenderHelper.RenderBackground(
            e.Graphics,
            Properties.Resources.Qbtn_Gray,//资源图
            this.ClientRectangle);
        base.OnPaint(e);
    }
}



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

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法
窗体的圆角边框也是九宫切图贴上去的 按钮就不说了

【九宫切图】什么是九宫绘图,九宫格绘法

【九宫切图】什么是九宫绘图,九宫格绘法


上面的 抽屉式按钮(虽然抽屉的那个按钮用不着九宫 三份就能搞定了 但为了方便还是调用的同一个方法)
右边的tabcontrol的图元都是(没有合适的例子所以直接把以前搞过的东西翻出来了)

评分

参与人数 3威望 +1 金钱 +7 贡献 +1 收起 理由
iowns + 1 感谢分享,LZ辛苦了~
781108724 + 1 感谢分享,LZ辛苦了~
xiaobo + 1 + 5 + 1 感谢LZ对论坛做出的贡献~

查看全部评分

回复 论坛版权

使用道具 举报

原始 发表于 2014-7-22 11:03:20 | 显示全部楼层
:o顶一个
回复

使用道具 举报

crystal_lz 发表于 2014-7-24 19:45:28 | 显示全部楼层
- -!、、、骚年 下面的东西是多余的、、、
 楼主| 乔克斯 发表于 2014-7-24 23:46:40 | 显示全部楼层
crystal_lz 发表于 2014-7-24 19:45
- -!、、、骚年 下面的东西是多余的、、、

噗~~
月光杯 发表于 2014-9-14 22:01:08 | 显示全部楼层
楼主你怎么这么帅
 楼主| 乔克斯 发表于 2014-9-15 09:39:46 | 显示全部楼层
月光杯 发表于 2014-9-14 22:01
楼主你怎么这么帅

我一直都呢么帅。
aolongxue 发表于 2014-9-17 11:11:21 | 显示全部楼层
NB~~~~~~~~~~~~~~~~
回复

使用道具 举报

simple 发表于 2014-10-28 15:44:46 | 显示全部楼层
小白学习了  原来是这个作用!
cjkall 发表于 2014-11-7 11:42:48 | 显示全部楼层
这程序的源码呢?
 楼主| 乔克斯 发表于 2014-11-7 12:57:00 | 显示全部楼层
cjkall 发表于 2014-11-7 11:42
这程序的源码呢?

核心类和讲解都在贴中。。没有案例下载哦。
您需要登录后才可以回帖 登录 | 加入CSkin论坛

本版积分规则

QQ|申请友链|小黑屋|手机版|Archiver|CSkin ( 粤ICP备13070794号

Powered by Discuz! X3.2  © 2001-2013 Comsenz Inc.  Designed by ARTERY.cn
GMT+8, 2019-9-21 04:50, Processed in 0.705439 second(s), 36 queries , Gzip On.

快速回复 返回顶部 返回列表