CN110554871B - NinePatch图形描绘方法及装置、计算机可读存储介质 - Google Patents

NinePatch图形描绘方法及装置、计算机可读存储介质 Download PDF

Info

Publication number
CN110554871B
CN110554871B CN201810563860.4A CN201810563860A CN110554871B CN 110554871 B CN110554871 B CN 110554871B CN 201810563860 A CN201810563860 A CN 201810563860A CN 110554871 B CN110554871 B CN 110554871B
Authority
CN
China
Prior art keywords
length
target
graph
point
area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810563860.4A
Other languages
English (en)
Other versions
CN110554871A (zh
Inventor
卢东林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Shijiu Information Technology Co ltd
Original Assignee
Shanghai Shijiu Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Shijiu Information Technology Co ltd filed Critical Shanghai Shijiu Information Technology Co ltd
Priority to CN201810563860.4A priority Critical patent/CN110554871B/zh
Publication of CN110554871A publication Critical patent/CN110554871A/zh
Application granted granted Critical
Publication of CN110554871B publication Critical patent/CN110554871B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Image Generation (AREA)

Abstract

一种NinePatch图形描绘方法及装置、计算机可读存储介质，所述方法包括：设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；根据目标图形的横向长度，伸缩第一伸缩区域得到第一目标区域；根据目标图形的纵向长度，伸缩第二伸缩区域得到第二目标区域；根据第一目标区域的长度和第一固定区域的长度，得到目标图形上各个点在原始图形上对应点的横坐标；根据第二目标区域的长度和第二固定区域的长度，得到目标图形上各个点在原始图形上对应点的纵坐标；将原始图形上各个点的颜色映射到目标图形上对应点的坐标上。应用上述方案，可以减少描画时间，降低存储3D Texture的缓存空间。

Description

NinePatch图形描绘方法及装置、计算机可读存储介质
技术领域
本发明涉及图像处理领域，尤其涉及一种NinePatch图形描绘方法及装置、计算机可读存储介质。
背景技术
安卓九点图(NinePatch)图形是一个可横向和纵向伸缩指定重复区域的图形，目前没有公认的成熟着色器(Shader)描述方法能一次性描画该类图形，所以现有技术中的做法为：先将NinePatch图形通过2D描画应用程序编程接口(Application ProgrammingInterface，API)：NinePatchDrawable.draw(canvas)，将图形按照目标尺寸画在画布(Canvas)上，然后将此Canvas转化成三维纹理(3D Texture)，最后再通过描画普通矩形的Shader，将图形描画在屏幕上。
这样做最大的问题是，当界面上多处用到同一个NinePatch，但目标尺寸各不相同时，例如聊天软件的对话气泡这种用一个NinePatch根据消息长短不断变化尺寸的场合下，就需要制作大量的3D Texture来适配并缓存所有尺寸的气泡图形，耗费大量的描画时间，也消耗了大量的缓存来存储3D Texture。
发明内容
本发明解决的技术问题是描画时间较长且存储3D Texture的缓存空间较大的问题。
为解决上述技术问题，本发明实施例提供一种NinePatch图形描绘方法，包括：设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域；根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域；根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标；根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标；将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
可选的，所述根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标，包括：根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
可选的，所述根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标，包括：根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
可选的，所述第一伸缩区域的个数是1或2。
可选的，所述根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域，包括：当所述第一伸缩区域的个数为2时，两个第一伸缩区域按照相同比例伸缩。
可选的，所述第二伸缩区域的个数是1或2。
可选的，所述根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域，包括：当所述第二伸缩区域的个数为2时，两个第二伸缩区域按照相同比例伸缩。
可选的，所述原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系采用如下公式计算：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale+(clamp(XO,XD,1.0)-XD)*kXfix，其中，XO为所述目标图形中第i个点的横坐标，取值范围为(0,1)，XS为所述原始图形中与所述目标图形中第i个点对应的点的横坐标，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
可选的，所述原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系采用如下公式计算：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale+(clamp(YO,YD,1.0)-YD)*kYfix，其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
为解决上述问题，本发明实施例还提供了一种NinePatch图形描绘装置包括：区域设定单元，用于设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；伸缩单元，用于根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域，根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域；坐标关系确定单元，用于根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标，根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标；渲染单元，用于将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
可选的，所述坐标关系确定单元，用于根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
可选的，所述坐标关系确定单元，用于根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
可选的，所述区域设定单元设定的所述第一伸缩区域的个数是1或2。
可选的，当所述第一伸缩区域的个数为2时，所述伸缩单元按照相同比例伸缩两个第一伸缩区域。
可选的，所述区域设定单元设定的所述第二伸缩区域的个数是1或2。
可选的，所述第二伸缩区域的个数为2时，所述伸缩单元按照相同比例伸缩两个第二伸缩区域。
可选的，所述坐标关系确定单元，在确定所述原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系时采用如下公式计算：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale+(clamp(XO,XD,1.0)-XD)*kXfix，其中，XO为所述目标图形中第i个点的横坐标，取值范围为(0,1)，XS为所述原始图形中与所述目标图形中第i个点对应的点的横坐标，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
可选的，所述坐标关系确定单元，在确定所述原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系时采用如下公式计算：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale+(clamp(YO,YD,1.0)-YD)*kYfix，其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机指令，所述计算机指令运行时执行上述任一种所述的NinePatch图形描绘方法的步骤。
本发明实施例还提供了一种NinePatch图形描绘装置，包括存储器和处理器，所述存储器上存储有计算机指令，所述计算机指令运行时所述处理器执行上述任一种所述的NinePatch图形描绘方法的步骤。
通过找到目标图形上的点在原始图形上的对应点的坐标，将原始图形上各个点的颜色映射到目标图形上，完成NinePatch图形描绘。在进行NinePatch图形描绘时，无需进行Canvas和3D Texture的步骤，因此解决了需要大量时间用于3D Texture描画和大量缓存空间用于3D Texture存储的问题，并加速了NinePatch图形的描绘速度。
进一步，本发明提供普适的计算公式来确定原始图形上的点和目标图形上的点的对应关系，适用于绝大多数设备。
附图说明
图1是本发明实施例中的一种NinePatch图形描绘方法的流程图；
图2是本发明实施例中的一种NinePatch图形；
图3是本发明实施例中的一种算法的推导过程示意图；
图4是本发明实施例中的一种算法的推导过程示意图；
图5是本发明实施例中的一种NinePatch图形描绘装置的结构示意图。
具体实施方式
现有技术中，在安卓(Android)系统中，解决OpenGL接口来描画2D图形以达到硬件描画加速的图形库中，描画采用NinePatch格式图形都比较费内存资源，并且描画速度较慢。
在本发明实施例中，解决了需要大量时间用于3D Texture描画和大量缓存空间用于3D Texture存储的问题，并加速了NinePatch图形的描绘速度。
为使本发明的上述目的、特征和有益效果能够更为明显易懂，下面结合附图对本发明的具体实施例做详细的说明。
参照图1，本发明提供一种NinePatch图形描绘方法，以下通过具体步骤进行详细说明。
步骤S101，设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域。
在具体实施中，可以选取一NinePatch图形作为原始图形，可以在选取的原始图形的横向上设定第一伸缩区域，在纵向上设定第二伸缩区域，在横向上未设定的区域为第一固定区域，在纵向上未设定的区域为第二固定区域。
这里需要说明的是，在NinePatch图形中，可以用上边缘的外框线代表横向区域，用左边缘的外框线代表纵向区域。在NinePatch图形的横向和纵向上设定完伸缩区域后，其余未设定的区域即视为固定区域。在本发明实施例中，若无特殊说明，伸缩区域均是指在转换成目标图形的过程中需要进行伸缩的区域，固定区域均是指在转换成目标图形的过程中不变化的区域。
步骤S102，根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域；根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域。
在具体实施中，目标图形为需要绘制的图形，目标图形的横向长度为所述目标图形上边缘的外框线长度，目标图形的纵向长度为所述目标图形左边缘的外框线长度。
为了防止图形失真，仅在少部分实施例中将原始图形横向上的区域完全设定为第一伸缩区域，在大部分实施例中，将原始图形横向上一部分设定为第一伸缩区域；纵向同理。
第一伸缩区域和第一固定区域的长度和为原始图形横向上的长度，第一固定区域长度不变，通过伸缩第一伸缩区域长度，将原始图形横向上的长度变为与目标图形横向上的长度一致；纵向同理。
步骤S103，根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
步骤S104，根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
采用步骤S103～步骤S104，可以找出目标图形上的各个点在原始图形上对应点的横纵坐标，用于下一步骤的绘制。
例如，在目标图形上的点a(m,n)，找到该点在原始图形上的对应点a’(m’,n’)，将a’点上的颜色映射到a点上。
步骤S105，将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
将原始图形上的颜色映射至目标图形上，完成在屏幕上的目标图形的渲染。
在具体实施中，可以根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
在具体实施中，可以根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
下面对得到目标图形上各个点在原始图形上对应点的纵坐标和横坐标的原理进行说明。
具体实施例中，对于目标图形上的固定区域的点，在原始图形上的对应点处于对应的固定区域上，因此可以计算得到固定区域长度占目标图形的尺寸长度的百分比，根据计算得到的百分比计算得到目标图形上固定区域的点在原始图形上固定区域的对应点的坐标。
具体实施例中，对于目标图形上的目标区域的点，在原始图形上的对应点处于对应的伸缩区域上，因此可以计算得到目标区域长度占目标图形的尺寸长度的百分比，根据计算得到的百分比计算得到目标图形上目标区域的点在原始图形上伸缩区域的对应点的坐标。
NinePatch图形规则中支持多个线段代表多个可拉伸区域，但是考虑了实际场景下，定义两段以上拉伸区域的场景不多，且定义的拉伸区域较多时会大量增加Shader的计算量，因此，本发明实施例中，第一伸缩区域个数为1或2，第二伸缩区域为1或2。
在本发明的一个实施例中，当第一伸缩区域的个数为2时，两个第一伸缩区域按照相同比例伸缩。
在本发明的一个实施例中，当第二伸缩区域的个数为2时，两个第二伸缩区域按照相同比例伸缩。
在上述实施例中，可以采用如下公式计算原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale+(clamp(XO,XD,1.0)-XD)*kXfix，其中，XS为所述目标图形中第i个点的横坐标，XO为所述目标图形中与所述原始图形中第i个点对应的点的横坐标，取值范围为(0,1)，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度，clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。使用该上述公式的原理在于，使用不同区域长度占目标图形的尺寸长度的百分比作为不同分段的比例，代入目标图形上的第i个点的横坐标，得到原始图形上对应点的横坐标。下面对该公式中各个量的数值进行说明。
参阅图2，其为本发明实施例中的一种NinePatch图形，在该图形20的上边缘的外框线上，WA、WB1、WC、WD1、WE分别代表所在区域的上边缘的外框线的长度，总长度为WT1，其中WB1和WD1所在的区域分别为第一段伸缩区域和第二段伸缩区域，WA、WC、WE分别为第一段固定区域、第二段固定区域和第三段固定区域。
参阅图3，WA、WB1、WC、WD1、WE分别对应的是按照目标图形尺寸伸缩后的各段区域长度，固定区域不变，WB1、WD1分别对应第一段伸缩区域和第二段伸缩区域伸缩后得到的第一段目标区域长度WB2和第一段目标区域WD2，目标图形在横向上的总长度为WT2。
参阅图4，为了求得上述公式中的未知值，使用一标准坐标轴，纵轴为XS，横轴为XO，各自的取值范围为(0，1)，可以取得边界值，其中Y轴上每个分段分别代表的是原始图形中各个区域占原始图形在横向长度的百分比数值，X轴上每个分段分别代表的是目标图形中各个区域占目标图形在横向长度的百分比数值。XA、XB、XC、XD、XE分别为各个段的端点的横坐标值，由于固定区域不变化，因此用kXfix表示A区间、C区间和E区间线段的斜率，由于第一段伸缩区域和第二段伸缩区域按照相同比例伸缩，因此用kXScale表示B区间和D区间线段的斜率。
其中，WT1、WT2、WA、WB、WC、WD、WE为已知量，由此可得：
WB2＝(WT2–(WA+WC+WE))x(WB1/(WB1+WD1))，
WD2＝(WT2–(WA+WC+WE))x(WD1/(WB1+WD1))，
XA＝WA/WT2，
XB＝WB2/WT2+XA，
XC＝WC/WT2+XB，
XD＝WD2/WT2+XC，
XE＝WE/WT2+XD，
kXFix＝(WA/WT1)/XA，
kXScale＝(WB1/WT1)/(WB2/WT2)，将得到的值代入上述clamp函数，即可得到目标图形中第i个点在原始图形上的对应点的横坐标。
在上述实施例中，用于计算原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系的公式如下：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale+(clamp(YO,YD,1.0)-YD)*kYfix，其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。使用该上述公式的原理在于，使用不同区域长度占目标图形的尺寸长度的百分比作为不同分段的比例，代入目标图形上的点第n个的纵坐标，得到原始图形上对应点的纵坐标。该公式中各个量的数值计算过程与上述求导目标图形上第i个点在原始图形上对应点的横坐标的过程相同。
在得到目标图形上各个点在原始图形上的对应点后，将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上，该步骤可以由包括但不限于FragmentShader算法完成，由此完成NinePatch图形在屏幕上的绘制。
在本发明其他实施例中，如伸缩区域个数为1时，固定区域个数为2，或者伸缩区域个数为1时，固定区域为1，或者伸缩区域为2时，固定区域为2。在这些实施例中，均可适用上述公式，代入方式为，在伸缩区域个数为1时，固定区域个数为2时，将代表第二段伸缩区域、第二段目标区域和第三段固定区域的变量代入0，即不存在的区域长度值为0，其他实施例同理。
参照图5，本发明实施例提供了一种NinePatch图形描绘装置50，包括：
区域设定单元501，用于设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；
伸缩单元502，用于根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域，根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域；
坐标关系确定单元503，用于根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标，根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标；
渲染单元504，用于将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
在本发明具体实施例中，所述坐标关系确定单元503，用于根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
在本发明具体实施例中，所述坐标关系确定单元503，用于根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
在本发明具体实施例中所述区域设定单元501设定的所述第一伸缩区域的个数为1或2，在上述实施例中，当所述第一伸缩区域的个数为2时，所述伸缩单元502按照相同比例伸缩两个第一伸缩区域。
在本发明的具体实施例中所述区域设定单元501设定的所述第二伸缩区域的个数为1或2，在上述实施例中，当所述第二伸缩区域的个数为2时，所述伸缩单元502按照相同比例伸缩两个第二伸缩区域。
在本发明具体实施例中，所述坐标关系确定单元503，在确定所述原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系时采用如下公式计算：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale+(clamp(XO,XD,1.0)-XD)*kXfix，其中，XO为所述目标图形中第i个点的横坐标，取值范围为(0,1)，XS为所述原始图形中与所述目标图形中第i个点对应的点的横坐标，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。使用该上述公式的原理在于，使用不同区域长度占目标图形的尺寸长度的百分比作为不同分段的比例，代入目标图形上的第i个点的横坐标，得到原始图形上对应点的横坐标。该公式中各个量的数值参考上文。
在本发明具体实施例中，所述坐标关系确定单元503，在确定所述原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系时采用如下公式计算：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale+(clamp(YO,YD,1.0)-YD)*kYfix，其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。使用该上述公式的原理在于，使用不同区域长度占目标图形的尺寸长度的百分比作为不同分段的比例，代入目标图形上的第n个点的纵坐标，得到原始图形上对应点的纵坐标。该公式中各个量的数值参考上文。
在本发明具体实施例中，如伸缩区域个数为1时，固定区域个数为2，或者伸缩区域个数为1时，固定区域为1，或者伸缩区域为2时，固定区域为2。在这些实施例中，均可适用上述公式，代入方式为，在伸缩区域个数为1时，固定区域个数为2时，将代表第二段伸缩区域、第二段目标区域和第三段固定区域的变量代入0，即不存在的区域长度值为0，其他实施例同理。
在得到目标图形上各个点在原始图形上的对应点后，将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上，该步骤可以由包括但不限于FragmentShader算法完成，由此完成NinePatch图形在屏幕上的绘制。
本发明还提供一种计算机可读存储介质，其上存储有计算机指令，所述计算机指令运行时执行上述的NinePatch图形描绘方法的步骤。
本发明还提供一种NinePatch图形描绘装置，包括存储器和处理器，所述存储器上存储有计算机指令，所述计算机指令运行时所述处理器执行上述的图形描绘方法的步骤。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指示相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：ROM、RAM、磁盘或光盘等。
虽然本发明披露如上，但本发明并非限定于此。任何本领域技术人员，在不脱离本发明的精神和范围内，均可作各种更动与修改，因此本发明的保护范围应当以权利要求所限定的范围为准。

Claims (20)

1.一种NinePatch图形描绘方法，其特征在于，包括：
设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；
根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域；
根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域；
根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标；根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标；
将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
2.根据权利要求1所述的NinePatch图形描绘方法，其特征在于，所述根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标，包括：
根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
3.根据权利要求1或2所述的NinePatch图形描绘方法，其特征在于，所述根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标，包括：
根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
4.根据权利要求3所述的NinePatch图形描绘方法，其特征在于，
所述第一伸缩区域的个数为1或2。
5.根据权利要求4所述的NinePatch图形描绘方法，其特征在于，所述根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域，包括：
当所述第一伸缩区域的个数为2时，两个第一伸缩区域按照相同比例伸缩。
6.根据权利要求3所述的NinePatch图形描绘方法，其特征在于，
所述第二伸缩区域的个数为1或2。
7.根据权利要求6所述的NinePatch图形描绘方法，其特征在于，所述根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域，包括：当所述第二伸缩区域的个数为2时，两个第二伸缩区域按照相同比例伸缩。
8.根据权利要求5所述的NinePatch图形描绘方法，其特征在于，
所述原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系采用如下公式计算：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale
+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale
+(clamp(XO,XD,1.0)-XD)*kXfix，
其中，XO为所述目标图形中第i个点的横坐标，取值范围为(0,1)，XS为所述原始图形中与所述目标图形中第i个点对应的点的横坐标，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
9.根据权利要求7所述的NinePatch图形描绘方法，其特征在于，
所述原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系采用如下公式计算：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale
+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale
+(clamp(YO,YD,1.0)-YD)*kYfix，
其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，
YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
10.一种NinePatch图形描绘装置，其特征在于，包括：
区域设定单元，用于设定原始图形在横向的第一伸缩区域以及在纵向的第二伸缩区域，在横向上的其他区域为第一固定区域，在纵向上的其他区域为第二固定区域；
伸缩单元，用于根据目标图形的横向长度，伸缩所述第一伸缩区域得到第一目标区域，根据目标图形的纵向长度，伸缩所述第二伸缩区域得到第二目标区域；
坐标关系确定单元，用于根据所述第一目标区域的长度和所述第一固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的横坐标，根据所述第二目标区域的长度和所述第二固定区域的长度，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标；
渲染单元，用于将所述原始图形上各个点的颜色映射到所述目标图形上对应点的坐标上。
11.根据权利要求10所述的NinePatch图形描绘装置，其特征在于，
所述坐标关系确定单元，用于根据所述第一目标区域的长度占所述目标图形在横向上的长度的百分比，以及所述第一固定区域的长度占所述目标图形在横向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的横坐标。
12.根据权利要求10或11所述的NinePatch图形描绘装置，其特征在于，
所述坐标关系确定单元，用于根据所述第二目标区域的长度占所述目标图形在纵向上的长度的百分比，以及所述第二固定区域的长度占所述目标图形在纵向上的长度的百分比，得到所述目标图形上各个点在所述原始图形上对应点的纵坐标。
13.根据权利要求12所述的NinePatch图形描绘装置，其特征在于，
所述区域设定单元设定的所述第一伸缩区域的个数是1或2。
14.根据权利要求13所述的NinePatch图形描绘装置，其特征在于，
当所述第一伸缩区域的个数为2时，所述伸缩单元按照相同比例伸缩两个第一伸缩区域。
15.根据权利要求12所述的NinePatch图形描绘装置，其特征在于，
所述区域设定单元设定的所述第二伸缩区域的个数是1或2。
16.根据权利要求15所述的NinePatch图形描绘装置，其特征在于，
当所述第二伸缩区域的个数为2时，所述伸缩单元按照相同比例伸缩两个第二伸缩区域。
17.根据权利要求14所述的NinePatch图形描绘装置，其特征在于，
所述坐标关系确定单元，在确定所述原始图形各个点的横坐标与所述目标图形各个点的横坐标的关系时采用如下公式计算：
XS＝clamp(XO,0.0,XA)*kXFix+(clamp(XO,XA,XB)-XA)*kXScale
+(clamp(XO,XB,XC)-XB)*kXFix+(clamp(XO,XC,XD)-XC)*kXScale
+(clamp(XO,XD,1.0)-XD)*kXfix，
其中，XO为所述目标图形中第i个点的横坐标，取值范围为(0,1)，XS为所述原始图形中与所述目标图形中第i个点对应的点的横坐标，XA为第一段固定区域长度占所述目标图形在横向的长度的百分比，XB为第一段目标区域长度占所述目标图形在横向的长度的百分比与XA的和，XC为第二段固定区域长度占所述目标图形在横向的长度的百分比与XB的和，XD为第二段目标区域长度占所述目标图形在横向的长度的百分比与XC的和，kXFix＝(WA/WT1)/(WA/WT2)，WA为所述第一固定区域长度，WT1为所述原始图形在横向的长度,WT2为所述目标图形在横向的长度，kXScale＝(WB1/WT1)/(WB2/WT2)，WB1为所述第一伸缩区域长度,WB2为所述第一目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
18.根据权利要求16所述的NinePatch图形描绘装置，其特征在于，
所述坐标关系确定单元，在确定所述原始图形各个点的纵坐标与所述目标图形各个点的纵坐标的关系时采用如下公式计算：
YS＝clamp(YO,0.0,YA)*kYFix+(clamp(YO,YA,YB)-YA)*kYScale
+(clamp(YO,YB,YC)-YB)*kYFix+(clamp(YO,YC,YD)-YC)*kYScale
+(clamp(YO,YD,1.0)-YD)*kYfix，
其中，YO为所述目标图形中第n个点的纵坐标，取值范围为(0，1)，YS为所述原始图形中与所述目标图形第n个点对应的点的纵坐标，YA为第一段固定区域长度占所述目标图形在纵向的长度的百分比，YB为第一段目标区域长度占所述目标图形在纵向的长度的百分比与YA的和，YC为第二段固定区域长度占所述目标图形在纵向的长度的百分比与YB的和，YD为第二段目标区域长度占所述目标图形在纵向的长度的百分比与YC的和，kYFix＝(ZA/ZT1)/(ZA/ZT2)，ZA为所述第二固定区域长度，ZT1为所述原始图形在纵向的长度，ZT2为所述目标图形在纵向的长度，kYScale＝(ZB1/ZT1)/(ZB2/ZT2)，ZB1为所述第二伸缩区域长度，ZB2为所述第二目标区域长度；clamp(A,B,C)为在A和B中选取最大值，并将选取的最大值再与C进行比较后选取二者之间最小值作为返回值。
19.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述计算机指令运行时执行权利要求1～9任一项所述的NinePatch图形描绘方法的步骤。
20.一种NinePatch图形描绘装置，包括存储器和处理器，所述存储器上存储有计算机指令，其特征在于，所述计算机指令运行时所述处理器执行权利要求1～9任一项所述的NinePatch图形描绘方法的步骤。
CN201810563860.4A 2018-06-04 2018-06-04 NinePatch图形描绘方法及装置、计算机可读存储介质 Active CN110554871B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810563860.4A CN110554871B (zh) 2018-06-04 2018-06-04 NinePatch图形描绘方法及装置、计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810563860.4A CN110554871B (zh) 2018-06-04 2018-06-04 NinePatch图形描绘方法及装置、计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN110554871A CN110554871A (zh) 2019-12-10
CN110554871B true CN110554871B (zh) 2022-12-06

Family

ID=68735932

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810563860.4A Active CN110554871B (zh) 2018-06-04 2018-06-04 NinePatch图形描绘方法及装置、计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN110554871B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112053416B (zh) * 2020-09-14 2023-10-24 网易（杭州）网络有限公司 图像处理方法、装置、存储介质及计算机设备
CN113256485B (zh) * 2021-05-21 2024-01-30 百果园技术(新加坡)有限公司 图像拉伸方法、装置、电子设备和存储介质
CN114398124B (zh) * 2021-12-31 2024-04-12 深圳市珍爱捷云信息技术有限公司 基于iOS系统的点九效果图渲染方法及其相关装置

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102831338B (zh) * 2012-06-28 2015-09-30 北京奇虎科技有限公司 一种Android应用程序的安全检测方法及系统
CN103116490B (zh) * 2012-12-04 2016-06-29 广州市久邦数码科技有限公司 一种基于网页的九切图绘制方法
CN105228080B (zh) * 2014-06-27 2018-12-07 上海视九信息科技有限公司 多屏互动方法、系统及浏览器
CN106202158A (zh) * 2016-06-23 2016-12-07 乐视控股（北京）有限公司 一种图形文件格式的使用方法及装置

Also Published As

Publication number Publication date
CN110554871A (zh) 2019-12-10

Similar Documents

Publication Publication Date Title
CN110554871B (zh) NinePatch图形描绘方法及装置、计算机可读存储介质
CN112233215B (zh) 轮廓渲染方法、装置、设备及存储介质
JP6818471B2 (ja) 画像処理装置、画像処理方法、及びプログラム
US11074744B2 (en) Method and apparatus for performing tile-based path rendering
KR20160058058A (ko) 이미지 처리 방법 및 장치
CN110910308B (zh) 图像处理方法、装置、设备和介质
CN106875328B (zh) 图像处理方法和装置
CN108304845B (zh) 图像处理方法、装置及存储介质
KR20130097886A (ko) 렌더링 장치 및 그 방법
US11636574B2 (en) Scaling method and apparatus, device and medium
CN107424583B (zh) 异形图像的显示数据处理方法和系统
JP2010515131A (ja) ベクトルグラフィックをラスター化するプロセスにおいて境界を発生させるための方法およびシステム、ならびに、システムを製造するための方法
CN113781571A (zh) 图像处理方法和装置
JP2010108205A (ja) 超解像画像作成方法
JP2017134596A (ja) 画像処理方法及びプロセスシミュレーション装置
US20150228113A1 (en) Graphic data rendering method and apparatus, and recording medium
US11741653B2 (en) Overlapping visibility and render passes for same frame
KR101098830B1 (ko) 서피스 텍스처 매핑 장치 및 그 방법
CN114170257A (zh) 一种拟合弯曲目标轮廓的、装置、计算机设备及存储介质
CN103559721A (zh) 一种基于图像梯度的三角剖分快速图像融合方法
CN112348021A (zh) 文本检测方法、装置、设备及存储介质
CN111429541B (zh) 一种图形擦除方法及装置
JP7429666B2 (ja) 点群ノイズ除去装置及びプログラム
JP5719271B2 (ja) 画像処理方法、画像処理装置及び画像処理プログラム
CN117195334A (zh) 一种多段线线宽扩展方法、装置、存储介质及计算机设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant