香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

建站专题

看完这篇基础科普,别再说你不会用点九图了! - 网页设计 - yinxi.net

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-04-10 02:16:00 浏览数: 56

很多朋友说看了网上很多关于点九的文章,越看越糊涂,之前也有答应大家,科普一下点九图,所以今天文章来啦!

欢迎关注作者的微信公众号:「菜心设计铺」

先来看看大纲:

  • 什么是点九图
  • 点九图的作用是什么
  • 点九图的原理
  • 总结

一. 什么是点九图

点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是「.9.png」的图片,就是点九图。

二. 点九图的作用是什么

每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。

其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:

如果它需要纵向拉伸,直接拉会变成下面这个样子:

而用了点九图就可以让切图局部拉伸,而不是整体拉伸,这样就可以把容易变形的地方保护起来:

是不是拉伸的很完美!有黑线不用怕,那只是告诉安卓系统:嘿,大兄弟,这是张点九图,特殊对待一下!

这有能让你快速制作点九图的小教程 → 《你知道Android里的“点九”吗?》。

三. 点九图的原理

点九图最大的原则就是四个边必须各有一条纯黑的线(或一像素的点),如下图:

如果四条线少任何一条,或者线不是纯黑的(#000000),安卓系统就不认你!

其中这四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:

先说左上两条线,因为两条线原理是一样的,所以我们单独拿左边这条线来举例吧,当我们没有左边那条黑线时,纵向拉伸是这样的:

圆角是不是变形了,如果左边加一条黑线,就相当于把原来的图形分为三个部分:

当再次纵向拉伸的时候,只有标记了黑线的部分可以被拉伸,而上下两部分是完好无损的,想象一下,无论你拉伸到多高,是不是都不会变形了:

当然,你左边画一个点也可以起到相同的效果:

左边这条线是控制纵向拉伸的,所以上面那条黑线就是控制横向拉伸的,原理是一样的!

接下来我们来说右下两条线,是控制内容区域的,单独拿右边那条线来举例,如果没有右边那条黑线,在这个切图上输入内容,比如文字,是没有限制的,内容会撑满整个背景图:

当有了右边那条黑线后,切图相当于在纵向上又被分开了:

而这次是右边有黑线哦,别忘了右边的黑线是控制显示区域的,所以只有带黑线的部分才可以显示内容。

当然,文字不会这样被切断一半显示的,这里只是方便大家观看哪里可以显示内容!

同样的原理,当我下面也画一条线后,横向上也是只有带黑线的部分可以显示内容(红线是辅助示意的哈):

这就是点九的基本原理了!

四. 总结

最后总结几个要点:

  • 点九切图四周必须要有四条一像素纯黑的线或点。
  • 左上两条线控制拉伸区,右下两条线控制内容区。
  • 输出的图片后缀必须是「.9.png」。

至于用插件还是自己手动切点九图,看自己习惯吧,我一般都是自己画,比较放心一点。

好了,今天就讲这些了,我猜你应该大概明白了,如果没明白,再看一遍吧。

欢迎关注作者的微信公众号:「菜心设计铺」

「还有哪些必读的基础知识」

  • 《简单易懂!写给初学者的UI、UX、GUI新手科普指南》
  • 《超全面!信息图形设计知识全方位科普》
  • 《新手科普文!每个设计师都该懂的参考线完全手册》

================明星栏目推荐================

优优教程网: yinxi.net 是巅云旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://www.yinxi.net/

巅云大课堂

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

17
04月
重庆市中山医院

重庆市中山医院是重庆市卫生局直属集科研、教学、医疗一体的有较强综合实力的三级专科医院。医院位于重庆市渝中区交通极为便利的主干道中山一路上,前... >>详情

14
04月
SEO的常用的优化工具有哪些

seo优化工具作为一名站长,SEO是一定要做的,而做SEO则离不开一些SEO工具的辅助。那么,常用的SEO工具都有哪些? 网站建设一、s... >>详情

26
04月
mac系统下安装多个php并自由切换的方法详

前言最近工作中遇到一个问题,需要实现在mac系统下安装多个php并实现自由切换,通过查找相关的资料找到了解决的方法,所以想着总结下来,方便大... >>详情

23
04月
centOS7安装docker的详细步骤

centOS 7如何安装docker?本文给出详细的步骤。首先准备一台linux系统。Docker需要一个64位系统的系统,内核的版本必须大... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号