点九图入门到精通 🔥

简介: 点九图入门到精通 🔥

很多朋友说看了网上很多关于点九的文章,越看越糊涂,所以今天文章来啦!

先来看看大纲:

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

一. 什么是点九图

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

二. 点九图的作用是什么

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

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


1686636372011.png

uisdc-9png-20171206-1.jpg

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

1686636383491.png

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

1686636410069.png

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

三. 点九图的原理

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

1686636422616.png

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

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

1686636437935.png

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

1686636459370.png

uisdc-9png-20171206-6.jpg

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

1686636471512.png

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

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


1686636493524.png

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

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

1686636505619.png


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

1686636516075.png

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

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

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

1686636539511.png


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

四. 总结

最后总结几个要点:

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

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

相关文章
|
2月前
|
数据采集 机器学习/深度学习 人工智能
Python编程入门:从零基础到实战应用
【9月更文挑战第15天】本文将引导读者从零开始学习Python编程,通过简单易懂的语言和实例,帮助初学者掌握Python的基本语法和常用库,最终实现一个简单的实战项目。文章结构清晰,分为基础知识、进阶技巧和实战应用三个部分,逐步深入,让读者在学习过程中不断积累经验,提高编程能力。
|
4月前
|
存储 算法 JavaScript
IT基础知识入门:为IT小白打造的知识宝典
IT基础知识入门:为IT小白打造的知识宝典
129 4
|
4月前
|
Dart 算法 JavaScript
C#数据结构与算法入门教程,值得收藏学习!
C#数据结构与算法入门教程,值得收藏学习!
|
6月前
|
编译器 程序员 Linux
【C++入门(上篇)】C++入门学习
【C++入门(上篇)】C++入门学习
|
算法 C语言
[笔记]计算机基础前言
[笔记]计算机基础前言
|
算法 C语言 C++
探索C++:从入门到进阶
大家好,欢迎来到我们的公众号!今天,我们将一起探索编程世界中的一颗明星——C++。无论您是初学者还是有经验的开发者,本文都将带您从C++的基础知识一路探索到进阶应用。让我们开始吧!
70 0
|
存储 自然语言处理 安全
C++从入门到精通(第一篇) :C++的入门(基础语法的整理)
在C/C++中,变量、函数和后面要学到的类都是大量存在的,这些变量、函数和类的名称将都存在于全局作 用域中,可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突或名字 污染,namespace关键字的出现就是针对这种问题的。
134 0
C++从入门到精通(第一篇) :C++的入门(基础语法的整理)
|
编译器 C++
C++从入门到精通(第五篇) :C++模板初阶
如何实现一个通用的交换函数呢? 方法一:(函数重载)
96 0
C++从入门到精通(第五篇) :C++模板初阶
|
开发框架 IDE .NET
☀️ 学会编程入门必备 C# 最基础知识介绍(一)
前言 C# 🔥 C# 简介💫 C# 强大的编程功能👍 C# 环境👏 .Net 框架(.Net Framework)💪 C# 的集成开发环境(Integrated Development Environment - IDE)👐 在 Linux 或 Mac OS 上编写 C# 程序🙏 C# 程序结构👼 C# Hello World 实例🙉 编译 & 执行 C# 程序🙊 C# 有用的资源👀