确定切图后直接改变图片的画布大小，
手动将上下左右各增加1px
使用铅笔工具，手动绘制拉伸区域，色值必须为黑色（#000000）。
存储为web所用格式，选择png-24，亮毁野储存时手动将后缀名改为.9.png
不过这种方法的缺点是余袜不能实时预览，判断并测试拉伸区域的准确性。
使用此方法需要注意以下2点:
1. 手绘的黑线拉伸区必须是#000000，透明度100%，并且图像四边不能出现半透明像素；
2. 你的.9.png必须绘有拉伸区域的黑线。
二、什么是点九。
1、“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png。
其实相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中间区域。
2、示例
这张图只有中间用黑线指定的区域做拉伸。
1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域没有黑色条的位置覆盖的区域是图片拉伸时保持不变（比如，如果图片的四角为弧形的时敬喊候，当图片 被任意拉伸时，四角的弧形都不会发生改变）
黑色边代表内容的拉伸区域，设置可以直接规定四边长度，也可以拉伸完成。长度不对代表拉伸过程出现错误。具体的 *** 作步骤为：
1、点9图片是Android系统或ios系统中的一种可拉动和不失真的图片，例如，我们的微信聊天泡泡是典型的第9点图片，因为聊天泡泡需要关注文本的数量。
2、点9图和拉动方法的总图，一般图是整体放大，会有变形，而点9图是拉图的某些部分，不重复如圆圈角落和光泽度不变，从而实现图像的放大而不失真。
3、以之前绘制的气泡按钮为例。首先，用ps剪切图像边缘的图形。
4、使用[编辑] [画布大小]将画布设置为向左和向右扩展1个像素。
5、看看图片中的可乐区域，即不包括圆角，光泽等特殊区域的区域，我已在下图中圈出。如果无法确定某个区域是否是可拉动区域，则可以在绘制前放置图片。尝试将其部分拉出来。如果图像的变化失真，则不会拉动该区域。
目前，我可以看到可乐区域包括：纯色区域，渐变区域等，下图中绘制的光泽区域属于水平方向的可乐区域和垂直方向的非可拉伸区域。方向。
6、拿起＃000颜色并按照以下标准填充图片周围的1px区域：上部是水平可拉动区域，左侧是纵向可拉动区域。这两个部分根据可牵引区域的特性确定黑条的长度弊蔽纤。下部是水平内容区域，右侧是垂直内容区域。
内容区域意味着如果按钮是窗口，则右下两个区域延伸到的矩形是可以显示租仿内并液容的区域。完成后，将图像保存为png并手动将文件后缀更改为。 9.png，完成了第9点地图的制作。
本文以微信社交对话框为例进行说明如弯誉何切点九图，其原则如下：
1.保留对话框周边四个圆角；
2.保留对话框右边的指向“三角”；
3.指定横向（水平）、纵向（垂直）内容范围区域；
整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。
具体步埋皮段骤如下所示：
第一步：画好我们需要的对话框样式；
第二步：将对话横向距离减小到两圆角之间为10PX（可以更小）间距，并用铅笔工具在对话框上部中间（水平）标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。
上图最终切图为放大图，方便说明（黑点、黑线、间距）更清晰。
注意，黑点与对话框之间保留1PX空白间距。
第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。
注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸（单方向）。
如果想要对话框纵向双向对称拉伸，指向“三握巧角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。如下图所示。
第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本垂直范围。如下图所示。
第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本水平范围。如下图所示。
总结：通过以上五步，该对话框的点九切图完毕。
如果没有指定文本范围区域，就会出现以下情况。如下图所示。
切记，黑点、黑线一定要与对话框之间保留 1PX 间距。切出来的图片命名为： “*.9.png”
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）