• 转载:九宫切图介绍


    转载:http://bbs.cskin.net/thread-62-1-1.html
    九宫切图在控件美化的时候会经常的用到 比如:
     
     
    最左边的是一个按钮的素材、、假设要把它做成一个按钮、、但是 需要用的按钮是多大不确定的、总不能一个按钮做一张图吧?而如果直接对图片进行拉升什么的 明显可以看到右边的两个看着怪别扭、于是乎 这个时候九宫切图出场了
    所谓九宫切图 其实就是把图片分成九份然后绘制到相应的区域去
     
     
    如上图 将按钮是图片分成九个区域 然后只需要将四角填充到目标区域 其余的拉伸就可以了
     
     
    如上图 假设粉色区域是 按钮的区域 左上角是原图
    先把原图的四个角取出来 原封不动的 绘制到目标区域的四个角去这样 无论按钮多大什么的 四个角都是没有拉伸过的 所以看不出那里别扭
    接下来就是四边了、、四边是不得不拉升的 不然就没法玩了但是 原图的上下两边左右拉升是没有啥问题 原图的左右两边上下拉伸是没有问题的
     
     
    剩下的中间区域没啥说的了 直接拉升过去 因为中间区域不像边缘 有线条轮廓和圆角啥的一拉伸就变形了 所以可以直接拉升
     
     
    然后把刚才的全部合并起来就是
     
     
     
    去掉参考线条和粉色背景就是
     

     

  • 相关阅读:
    EOJ 1822 Hanoi Tower IV
    Firefox,chrome,IE上传图片预览
    js保存,获取,删除cookie的操作
    jquery 特效
    SimpleDateFormat转换时间,12,24时间格式[转]
    javascript捕获页面窗口关闭事件
    [转]ajQuery的deferred对象详解
    iframe
    火狐路径问题
    JAVA折腾微信公众平台(Token验证)[转]
  • 原文地址:https://www.cnblogs.com/staring-hxs/p/4933739.html
Copyright © 2020-2023  润新知