专利名称：一种基于网页的九切图绘制方法
技术领域：
本发明涉及网页绘图技术领域，具体涉及一种基于网页的九切图绘制方法。
背景技术：
九切图又称点九图，是Andriod平台应用软件开发里的一种特殊的图片形式，文件扩展名为:.9.png,是把一张png图片分成9个部分,分别为4个角，4条边，以及一个中间区域。4个角是固定区域，不会被缩放；4条边是记录缩放区域的位置和大小；中间区域只有用黑线指定的区域才能被缩放。总之，九切图缩放类型或缩放区域最多有4种，分别是水平垂直都不缩放，水平缩放、垂直不缩放，水平不缩放、垂直缩放，水平垂直都缩放。智能手机中有自动横屏的功能，同一幅界面会在随着手机或平板电脑中的方向传感器的参数不同而改变显示的方向，在界面改变方向后，界面上的图形会因为长宽的变化而产生拉伸，造成图形的失真变形。并且Android平台的手机有多种不同的分辨率，普通图片经过缩放后，会模糊失真，但使用九切图，可以将图片横向和纵向同时进行局部缩放，实现同一张图在多分辨率下的完美显示。九切图的意义在于使用了.9.png图片技术后，只需要采用一套界面切图去适配不同的分辨率，大幅减少安装包的大小。而且这样程序不需要专门做处理的就可以实现其拉伸，也减少了代码量和开发工作量。并且九切图本身还具有色彩丰富，完美逼真的有点。目前九切图的制作方法是通过java系统配合Android模拟器来实现，并且只能应用于单一的Android平台。
发明内容
本发明的目的在于提供一种九切图在不同平台的支持Html5的浏览器中的支持应用方法，通过在支持Html5的网页浏览器上绘制九切图，打破九切图只能基于Android平台的现状，实现九切图的跨平台应用。为实现上述目的，本发明采用一下技术手段:—种基于网页的九切图绘制方法，其特征在于包含以下步骤:(I)通过javascript语言把原始图片绘制在Html5的Canvas画布上,并读取所述原始图片的首行、首列、尾行和尾列的像素值；(2)根据步骤(I)读取的原始图片像素值来判断所述原始图片是否为九切图，若是九切图，则进入步骤(3 );若是非九切图，则跳过后续步骤，结束绘制。(3)确定所述原始图片缩放与非缩放区域:分析步骤(I)读取的原始图片像素值，确定原始九切图各个区域位置和大小；(4)确定目标图片大小:根据实际情况自定义目标图片的宽度和高度；(5)判断目标图片是放大还是缩小并进行绘制:将步骤(4)中自定义好的目标图片的宽度和高度分别与所述原始图片宽度和高度进行比较，计算所述目标图片宽度和高度占所述原始图片宽度和高度的百分比，从而确定所述目标图片是缩小还是放大；若是放大，则直接进入九切图绘制步骤；若是缩小，则先放大，使其大于所述原始图片大小的最小值，然后进入九切图绘制步骤，再进行等比例缩小，最后显示在网页上。进一步的，所述步骤(2)的九切图判断标准为，根据所述原始图片首行和首列的像素值是否只存在黑色和透明，尾行和尾列的像素值是否全为黑色、全为透明或者只存在黑色和透明进行判断，若是，则为九切图，若不是，则为非九切图；所述黑色的RGBA值为#000255，所述透明的RGBA值为#0000。进一步的,所述步骤(3)确定九切图9个区域位置和大小的方法是，以所述Canvas画布的左上角为起始点，所述九切图9个区域的位置用坐标X和坐标Y表示,X表示各区域所在位置与所述起始点的水平距离表示各区域所在位置与所述起始点的垂直距离；所述九切图9个区域的大小用width和height表示，width表示区域的宽度；height表示区域的高度；所述九切图9个区域分为水平垂直都不缩放区域(1、3、7、9)，水平缩放、垂直不缩放区域(2、8)，水平不缩放、垂直缩放区域(4、6)和水平垂直都缩放区域(5)四种。进一步的，所述九切图绘制，以所述Canvas画布上的所述目标图片的画笔的位置是否小于所述原始图片的高和宽作为双循环条件，所述位置用X、y 二维坐标表示；根据所述目标图片的首行第二个像素值是否为黑色，首列第二个像素值是否为黑点，来判断所述目标图片的优先绘制区域；根据所述9个区域各自占所述目标图片总区域的百分比，对所述9个区域进行缩放。进一步的，所述九切图绘制具体实现步骤为:(I)初始化参数，所述参数主要包括所述原始图片大小，所述目标图片大小，所述Canvas画布大小及其起始点，所述原始图片首行、首列、尾行、尾列的像素值，所述缩放和非缩放区域的位置和大小；(2)判断所述目标图片大小是否小于所述原始图片大小，若是则以所述目标图片大小乘以固定放大因子，直到所述目标图片大小大于所述原始图片大小的最小值；若不是则进入步骤(3)；(3)判断是否为特殊九切图，若是，则重新计算水平和垂直缩放的长度，再进行步骤(4)，若不是则直接进入步骤(4)，所述特殊九切图为只含所述垂直水平都缩放、垂直缩放水平不缩放、垂直不缩放水平缩放和垂直水平都不缩四种区域中部分区域的九切图；(4)判断所述Canvas画布的画笔当前位置,用坐标点x、y表示，判断y是否小于当前图片的高度，若不是，则表示所述当前图像绘制完成，进行步骤(5);若是，则判断X是否小于所述当前图片宽度，若不是，则跳出该循环；若是，则根据所述当前图片首列第二个和首行第二个像素值是黑点还是透明，确定优先绘制区域，并进行循环判断并依次绘制，直到y不小于前图片的高度时，跳出循环，表示绘制完成，进行步骤(5);所述当前图片为绘制过程中中间图片。(5)判断所述当前图片的大小是否大于所述目标图片大小，若是，则用所述Canvas画布等比例缩小到所述目标图片大小，绘制在网页上；若不是，则直接绘制在网页上。进一步的，所述固定放大因子为1.5。进一步的，所述特殊九切图判断方法为，根据所述原始图片首行或者首列的像素值是否全为黑色，若是，则所述原始图片为特殊九切图，若不是，则所述原始图片为标准九切图。
进一步的所述优先绘制区域判断机制为，若所述当前图片首行和首列的第2个像素都是黑色，优先绘制水平垂直都缩放区域5 ;若所述当前图片首行第2个像素为黑色，首列第2个像素为透明，优先绘制水平缩放、垂直不缩放区域2、8 ;若所述当前图片首行第2个像素为透明，首列第2个像素为黑色，优先绘制水平不缩放、垂直缩放区域4、6 ;若所述当前图片首行第2个像素为透明，首列第2个像素为透明，优先绘制水平垂直都不缩放区域1、3、7、9。通过上述技术手段，首次实现了在浏览器网页上完美绘制九切图，与在Android平台的展示效果一样完美，逼真。网页上绘制九切图实现方法打破了只有Android平台才能识别九切图的局面，实现了跨平台；在网页上也支持九切图的自定义缩放，实现节省图片资源，适配屏幕大小。
图1为判断是否为九切图的流程图；图2为基于网页的九切图绘制方法的流程图；图3为九切图绘制实现的流程图；图4为九切图各区域分布示意图(坐标O为起始点,X为横轴坐标x,y为纵轴坐标1、。
具体实施例方式在实际应用过程中，并不是每一张九切图都需要重新绘制缩放，有的应用只需要判断是否为九切图就可以，有的则需要在判断的基础上进行缩放。因此，下面结合流程图，对实际应用中不同情况，对本发明做进一步说明。判断是否为九切图的实现方法(图1):1.通过javascript语言把原始图片绘制在支持Html5的Canvas画布上的网页上；2.获取Canvas画布上的图片的首行和首列、尾行和尾列的像素值，像素值的表示方法为RGBA, R表示为红色Red, G表示为绿色Green, B表示蓝色Blue, A表示透明Alpha,RBGA的值即是图片的每个像素值；3.根据首行和首列的像素值是否只存在黑色(RGBA的值为#000255)和透明(RGBA的值为#0000)，尾行和尾列的像素值是否全黑色或者全透明或者只存在黑色和透明进行判断。若是，则为九切图，若不是，则为非九切图；所述黑色的RGBA值为#000255，所述透明的RGBA 值为 #0000。基于网页的九切图绘制方法(图2):1.通过javascript语言把原始图片绘制在支持Html5的Canvas画布上的网页上;2.获取Canvas画布上的图片的首行和首列的像素值；3.确定缩放和非缩放区域，优先绘制区域，水平缩放宽度和垂直缩放长度占图片宽度和高度的百分比；优先绘制区域判断机制为，若当前图片首行和首列的第2个像素都是黑色，优先绘制水平垂直都缩放区域5 ;若当前图片首行第2个像素为黑色，首列第2个像素为透明，优先绘制水平缩放、垂直不缩放区域2、8;若当前图片首行第2个像素为透明，首列第2个像素为黑色，优先绘制水平不缩放、垂直缩放区域4、6 ;若当前图片首行第2个像素为透明，首列第2个像素为透明，优先绘制水平垂直都不缩放区域1、3、7、9。4.根据原始图片大小，所述目标图片大小，所述Canvas画布大小及其起始点，所述原始图片首行、首列、尾行、尾列的像素值，所述缩放和非缩放区域的位置和大小等参数，对九切图进行缩放绘制，显示在网页上。九切图绘制的实现步骤(图3):1.初始化一些参数，主要参数包括原始图片大小，所述目标图片大小，所述Canvas画布大小及其起始点，所述原始图片首行、首列、尾行、尾列的像素值，所述缩放和非缩放区域的位置和大小；2.判断目标图片大小是否小于原始图片大小，若是则以目标图片大小乘以固定放大因子1.5，直到目标图片大小大于原始图片大小的最小值，若不是则进入是否为特殊九切图判断；3.判断是否为特殊九切图，若是则重新计算水平和垂直缩放的长度，再进行下一步，若不是则直接进入下一步，所述特殊九切图为只含所述垂直水平都缩放、垂直缩放水平不缩放、垂直不缩放水平缩放和垂直水平都不缩四个区域中部分区域的九切图；特殊九切图判断方法为，根据所述原始图片首行或者首列的像素值是否全为黑色，若是，则所述原始图片为特殊九切图，若不是，则所述原始图片为标准九切图。4.判断所述Canvas画布的画笔当前位置,用坐标点x、y表示,判断y是否小于当前图片的高度，若不是则表示所述当前图像绘制完成，可进行下一步；若是则判断X是否小于所述当前图片宽度，若不是则跳出该循环；若是则根据所述当前图片首列第二个和首行第二个像素值是黑点还是透明，依次确定绘制哪个区域，并进行循环判断，直到I大于当前图片的高度时，跳出循环，表示绘制完成，进行下一部；所述当前图片为绘制过程中中间图片。5.获取绘制后的当前图片，判断当前图片的大小是否大于目标图片大小，若是则用Canvas画布等比例缩小到目标图片大小，绘制在网页上；若不是，则直接绘制在网页上。
权利要求
1.一种基于网页的九切图绘制方法，其特征在于包含以下步骤: (1)通过javascript语言把原始图片绘制在Html5的Canvas画布上,并读取所述原始图片的首行、首列、尾行和尾列的像素值； (2)根据步骤(I)读取的原始图片像素值来判断所述原始图片是否为九切图，若是九切图，则进入步骤(3);若是非九切图，则跳过后续步骤，结束绘制； (3)确定所述原始图片缩放与非缩放区域:分析步骤(I)读取的原始图片像素值，确定原始九切图各个区域位置和大小； (4)确定目标图片大小:根据实际情况自定义目标图片的宽度和高度； (5)判断目标图片是放大还是缩小并进行绘制:将步骤(4)中自定义好的目标图片的宽度和高度分别与所述原始图片宽度和高度进行比较，计算所述目标图片宽度和高度占所述原始图片宽度和高度的百分比，从而确定所述目标图片是缩小还是放大；若是放大，则直接进入九切图绘制步骤；若是缩小，则先放大，使其大于所述原始图片大小的最小值，然后进入九切图绘制步骤，再进行等比例缩小，最后显示在网页上。
2.如权利要求1所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(2)的九切图判断标准为，根据所述原始图片首行和首列的像素值是否只存在黑色和透明，尾行和尾列的像素值是否全为黑色、全为透明或者只存在黑色和透明进行判断，若是则为九切图，若不是则为非九切图；所 述黑色的RGBA值为#000255，所述透明的RGBA值为#0000。
3.如权利要求1所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(3)确定九切图9个区域位置和大小的方法是，以所述Canvas画布的左上角为起始点，所述九切图9个区域的位置用坐标X和坐标I表示，X表示各区域所在位置与所述起始点的水平距离；y表示各区域所在位置与所述起始点的垂直距离；所述九切图9个区域的大小用width和height表示，width表示区域的宽度；height表示区域的高度；所述九切图9个区域分为水平垂直都不缩放区域(1、3、7、9)，水平缩放、垂直不缩放区域(2、8)，水平不缩放、垂直缩放区域(4、6)和水平垂直都缩放区域(5)四种。
4.如权利要求1所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(5)的九切图绘制，以所述Canvas画布上的所述目标图片的画笔的位置是否小于所述原始图片的高和宽作为双循环条件，所述位置用X、y 二维坐标表示；根据所述目标图片的首行第二个像素值是否为黑色，首列第二个像素值是否为黑点，来判断所述目标图片的优先绘制区域；根据所述9个区域各自占所述目标图片总区域的百分比，对所述9个区域进行缩放。
5.如权利要求1或4所述的一种基于网页的九切图绘制方法，其特征在于，所述九切图绘制具体实现步骤为: (O初始化参数，所述参数主要包括所述原始图片大小，所述目标图片大小，所述Canvas画布大小及其起始点，所述原始图片首行、首列、尾行、尾列的像素值，所述缩放和非缩放区域的位置和大小； (2)判断所述目标图片大小是否小于所述原始图片大小，若是则以所述目标图片大小乘以固定放大因子，直到所述目标图片大小大于所述原始图片大小的最小值；若不是则进入步骤(3)； (3)判断是否为特殊九切图，若是，则重新计算水平和垂直缩放的长度，再进行步骤 (4)，若不是则直接进入步骤(4)，所述特殊九切图为只含所述垂直水平都缩放、垂直缩放水平不缩放、垂直不缩放水平缩放和垂直水平都不缩四种区域中部分区域的九切图； (4)判断所述Canvas画布的画笔当前位置,用坐标点x、y表示，判断y是否小于当前图片的高度，若不是，则表示所述当前图像绘制完成，进行步骤(5);若是，则判断X是否小于所述当前图片宽度，若不是，则跳出该循环；若是，则根据所述当前图片首列第二个和首行第二个像素值是黑点还是透明，确定优先绘制区域，并进行循环判断并依次绘制，直到I不小于前图片的高度时，跳出循环，表示绘制完成，进行步骤(5);所述当前图片为绘制过程中中间图片； (5)判断所述当前图片的大小是否大于所述目标图片大小，若是，则用所述Canvas画布等比例缩小到所述目标图片大小，绘制在网页上；若不是，则直接绘制在网页上。
6.如权利要求5所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(2)的固定放大因子为1.5。
7.如权利要求5所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(3)的特殊九切图判断方法为，根据所述原始图片首行或者首列的像素值是否全为黑色，若是，则所述原始图片为特殊九切图，若不是，则所述原始图片为标准九切图。
8.如权利要求5所述的一种基于网页的九切图绘制方法，其特征在于，所述步骤(4)的优先绘制区域判断机制为，若所述当前图片首行和首列的第2个像素都是黑色，优先绘制水平垂直都缩放区域(5);若所述当前图片首行第2个像素为黑色，首列第2个像素为透明，优先绘制水平缩放、垂直不缩放区域(2、8);若所述当前图片首行第2个像素为透明，首列第2个像素为黑色，优先绘制水平不缩放、垂直缩放区域(4、6);若所述当前图片首行第2个像素为透明，首列第2个像素 为透明，优先绘制水平垂直都不缩放区域(1、3、7、9)。
全文摘要
本发明请求保护一种基于网页的九切图绘制方法。包含以下步骤通过JAVA脚本语言把原始图片绘制在Html5的Canvas画布上，并读取所述原始图片的首行、首列、尾行和尾列的像素值；根据所读取的原始图片像素值来判断所述原始图片是否为九切图，若是九切图，则确定所述原始图片缩放与非缩放区域分析读取的原始图片像素值，确定原始九切图各个区域位置和大小；判断目标图片是放大还是缩小并进行绘制，最后显示在网页上。本发明打破了九切图只能基于Android平台的现状，实现九切图的跨平台应用。
文档编号G06F9/44GK103116490SQ20121051223
公开日2013年5月22日 申请日期2012年12月4日 优先权日2012年12月4日
发明者邓裕强, 黄爱华, 梁国盛, 朱海鑫, 黄伦, 张凯 申请人:广州市久邦数码科技有限公司