.9图片的那点事儿

简介: .9图片的那点事儿

概述


点九图又称九图,是一种png格式的图片,其后缀为.9.png ,其与传统png图片不同的地方是,点九图的四周边缘各有1个像素宽高的区域,而且只能填两种颜色,透明(#00000000)和黑色(#FF000000),其目的是用于对该图片的扩展区域和内容显示区域进行定义。


9图说明


20160322212757230.png


左边那条黑色线代表图片垂直拉伸的区域,

上边的那条黑色线代表水平拉伸区域,

右边的黑色线代表内容绘制的垂直区域,

下边的黑色线代表内容绘制的水平区域,

右边和下边的线是可选的,左边和上边的线不能省略。


核心要点:左上拉伸,右下内容


使用系统自带draw9patch工具制作9图


采用NinePatch图片做背景,可使背景随着内容的拉伸(缩小)而拉伸(缩小)。那么如何将普通的PNG图片编辑为NinePatch图片呢, Android SDK/tools目录下提供了编辑器draw9patch.bat,双击即可打开。


执行该工具,然后点击“File”->“open 9-path”打开一张用于制作NinePatch图片的图片。在画布的上方和左方的边上画线指定缩放区域,勾选“Show patches”可显示画定的区域,绿色为固定大小区域,红色为缩放区域,文字会摆放在红色区域。


制作完后,点击“File”—“save 9-path”保存图片,draw9patch工具会自动为图片加上*.9.png后缀。


把制作好的图片拷贝进项目的res/drawable目录,然后

编写代码

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/comments"
        android:layout_margin="10dp"
        android:text="TextTextTextText"
        android:textSize="24sp" />

20160322214406409.png


黑色那条线是一下下点出来的,如果想消除点的话:按住shift点即可!


Zoom: 用来缩放左边编辑区域的大小

Patch scale: 用来缩放右边预览区域的大小

Show lock: 当鼠标在图片区域的时候显示不可编辑区域

Show patches: 在编辑区域显示图片拉伸的区域 (使用粉红色来标示)

Show content: 在预览区域显示图片的内容区域(使用浅紫色来标示)

Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。(实际试发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。)


使用NinePatchEditor制作.9图片


用法基本同SDK自带的draw9patch

20160322215652878.png


使用[AndroidAssetStudio]制作.9图片

(http://romannurik.github.io/AndroidAssetStudio/nine-patches.html)


操作很简单,进入官网,相信一看就明白了。


这个功能只是AndroidAssetStudio的一个小功能,点击查看更多~


20160322213957121.png


使用NinePng九图神器,手机版的.9处理工具

下载地址

20160322220012201.png



20160322220044623.png

下载安装九图神器App,并启动;


划开左侧菜单栏,打开wifi共享,并在在浏览器上访问提示的地址,比如http://192.168.1.102:9889(注意,必须保证手机连接的wifi和电脑连接的wifi在同一局域网内才行,或者使用同一个路由器)


然后开始上传图片到手机上。并选择修改模式(一打开软件默认就是这个模式),点击进去编辑。


要想预览一下效果的话,可以点击预览效果按钮,就是那个顶部三角形按钮,图片会自动保存,预览时还可以设置一下文字信息等,App本身自动设置了模拟几个主流dpi分辨率的机型。


不满意,返回第三步修改,直到满意为止~


还有一篇很棒的文章~

相关文章
|
2月前
|
人工智能
图片生成很好用
图片展示了一张图表,图中通过不同的颜色和数据点展示了某项技术或产品在不同维度上的表现情况。标题“AI也很好用”表明该图表可能是在说明人工智能技术的实用性和效果。不过,由于缺少具体的数据和背景信息,无法提供更详细的解读。
图片生成很好用
|
2月前
图片的大小
【10月更文挑战第7天】
54 1
|
7月前
|
存储 算法 C#
C# 生成指定图片的缩略图
C# 生成指定图片的缩略图
|
计算机视觉 异构计算
【图片操作】给图片添加滤镜
现在我们都喜欢给图片添加滤镜,现在很多相机也自带了许多滤镜。我们可以在拍照的时候选择需要的滤镜。但是有时候我们需要给大量图片添加同样的滤镜,这个时候手动添加就非常麻烦了。为了方便,我们可以使用程序来帮我们完成添加滤镜的操作。
271 0
|
计算机视觉
【图片操作】生成动态图片
动态图片我们使用的还是比较频繁的,平时的表情包有很多动图。今天我们要做的就是自己制作动态图片,其实就是将视频转换成动图,操作起来非常简单。下面我们就来看看如何实现吧。
583 0
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
|
缓存 Android开发
图片
●图片加载,缓存,处理 Picasso (一个强大的图片下载与缓存的库) Fresco (一个用于管理图像和他们使用的内存的库) Glide (一个图片加载和缓存的库,使用的App有:网易新闻) Picasso-transformations (...
1410 0