ui九宫格切图 |
您所在的位置:网站首页 › 过生日用的九宫格图片是什么样的呢 › ui九宫格切图 |
九宫切图在控件美化的时候会经常的用到 比如: 20140630220626_56850.png (3.13 KB, 下载次数: 42) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 最左边的是一个按钮的素材、、假设要把它做成一个按钮、、但是 需要用的按钮是多大不确定的、总不能一个按钮做一张图吧?而如果直接对图片进行拉升什么的 明显可以看到右边的两个看着怪别扭、于是乎 这个时候九宫切图出场了 所谓九宫切图 其实就是把图片分成九份然后绘制到相应的区域去 20140630221536_68673.png (925 Bytes, 下载次数: 38) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 如上图 将按钮是图片分成九个区域 然后只需要将四角填充到目标区域 其余的拉伸就可以了 20140630222154_91840.png (1.62 KB, 下载次数: 35) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 如上图 假设粉色区域是 按钮的区域 左上角是原图 先把原图的四个角取出来 原封不动的 绘制到目标区域的四个角去这样 无论按钮多大什么的 四个角都是没有拉伸过的 所以看不出那里别扭 接下来就是四边了、、四边是不得不拉升的 不然就没法玩了但是 原图的上下两边左右拉升是没有啥问题 原图的左右两边上下拉伸是没有问题的 20140630222622_35937.png (1.57 KB, 下载次数: 27) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 剩下的中间区域没啥说的了 直接拉升过去 因为中间区域不像边缘 有线条轮廓和圆角啥的一拉伸就变形了 所以可以直接拉升 20140630222923_77212.png (1.49 KB, 下载次数: 41) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 然后把刚才的全部合并起来就是 20140630223020_70104.png (1.74 KB, 下载次数: 36) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 去掉参考线条和粉色背景就是 20140630223125_21458.png (1.44 KB, 下载次数: 37) 【九宫切图】什么是九宫绘图,九宫格绘法 2014-7-21 11:45 上传 - -!、、不要纠结为嘛和原图颜色不一样 我用算法重新处理过一次图形的、、 这样以来 就可以把一个按钮拉伸到任意大小了 但是注意 不是啥图片都能进行九宫切图来操作 比如你要那一个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类中 方便其他调用 而假设要写控件就可以这样: |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |