CN107833227B - 一种圆形裁剪区域的绘制方法及其系统 - Google Patents

Abstract

本发明公开了一种圆形裁剪区域的绘制方法及其系统，其首先需要读取整个图片的图片信息；其次根据上述图片信息，计算出图片的最大内切圆的半径；然后根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；而后分别读取每一个矩形区域内的图片信息；最后按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；上述所述图片信息包括但不限于图片的宽度和高度。本发明可以大大简化圆形可视区域的绘制办法，只需要一张png或者jpg的图片即可。

Description

一种圆形裁剪区域的绘制方法及其系统

技术领域

本发明涉及游戏软件开发技术领域，具体地是涉及一种圆形裁剪区域的绘制方法及其系统。

背景技术

现有技术一般都是采用OPENGL底层绘制出可视区域，在可视区域以内裁剪显示的内容。但是此种方式，其底层算法较为复杂，一般的新手在不会利用OpenGL的情形下不容易制作出圆形绘制区域的效果，是与传统的圆形区域绘制截然不同的两个方式。

因此，本发明的发明人亟需构思一种新技术以改善其问题。

发明内容

本发明旨在提供一种圆形裁剪区域的绘制方法及其系统，其可以大大简化了圆形可视区域的绘制。

为解决上述技术问题，本发明的技术方案是：

一种圆形裁剪区域的绘制方法，包括如下步骤：

S1：读取整个图片的图片信息；

S2：根据上述图片信息，计算出图片的最大内切圆的半径；

S3：根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

S4：分别读取每一个矩形区域内的图片信息；

S5：按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

上述所述图片信息包括但不限于图片的宽度和高度。

优选地，所述步骤S3具体包括：

从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积。

优选地，所述步骤S4具体包括：

按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息。

一种圆形裁剪区域的绘制系统，包括如下模块：

第一读取模块，用于读取整个图片的图片信息；

计算模块，用于根据上述图片信息，计算出图片的最大内切圆的半径；

分割模块，用于根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

第二读取模块，用于分别读取每一个矩形区域内的图片信息；

绘制模块，用于按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

上述所述图片信息包括但不限于图片的宽度和高度。

优选地，所述分割模块具体包括：

坐标系建立单元，用于从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；

分割单元，用于从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积。

优选地，所述第二读取模块，用于按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息。

采用上述技术方案，本发明至少包括如下有益效果：

本发明所述的圆形裁剪区域的绘制方法及其系统，可以大大简化圆形可视区域的绘制办法，只需要一张png或者jpg的图片即可。

附图说明

图1为本发明所述的圆形裁剪区域的绘制方法的流程图；

图2为本发明所述的圆形裁剪区域的绘制系统的结构示意图；

图3为本发明所述的圆形裁剪区域的绘制原理图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

如图1所示，为符合本实施例的一种圆形裁剪区域的绘制方法，包括如下步骤：

S1：读取整个图片的图片信息；

S2：根据上述图片信息，计算出图片的最大内切圆的半径；

S3：根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

S4：分别读取每一个矩形区域内的图片信息；

S5：按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

上述所述图片信息包括但不限于图片的宽度和高度。

优选地，所述步骤S3具体包括：

从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积。

优选地，所述步骤S4具体包括：

按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息。

实施例2

如图2所示，为符合本实施例的一种圆形裁剪区域的绘制系统，包括如下模块：

第一读取模块，用于读取整个图片的图片信息；

计算模块，用于根据上述图片信息，计算出图片的最大内切圆的半径；

分割模块，用于根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

第二读取模块，用于分别读取每一个矩形区域内的图片信息；

绘制模块，用于按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

上述所述图片信息包括但不限于图片的宽度和高度。

优选地，所述分割模块具体包括：

坐标系建立单元，用于从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；

分割单元，用于从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积。

优选地，所述第二读取模块，用于按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息。

下面结合附图3具体阐述本发明。

本发明的具体步骤如下：

(1)读取图片内容，宽高数据。

(2)根据宽高数据，计算出图片的最大内切圆的半径，根据高的长度即可算出，高的长度就是最大内切圆的直径，这是常识。

(3)从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系。从原点处间隔2个像素将圆形区域分割，分割后在分割出具体的矩形面积。

计算公式：由于每个矩形的宽是2个像素，矩形长边的长度的一半是，当前分割线与X轴的交点与圆心的长度和分割线与圆边的交点的距离，同时这两个点与圆心构成一个直角三角形。

即，(h/2)*(h/2)＝r*r-(2*i)*(2*i)；i是从原点开始向X轴的两个方向依次延伸，间隔两个像素分割出第i个矩形，i从1开始。

(4)圆心是图片对角线的交点，从内切圆中已经算出每个矩形的宽高大小，圆心的位置已知，矩形的宽高和位置已知，即可算出每个矩形的像素的起始位置，分别读取图片数据，读取出的数据和第一步不同，第一步是读取出整个图片的数据，此处是根据起始位置和宽高，截取出图片中固定矩形区域的图片数据，即ReadImageInf(float x，float y，floatw，float，h)。

计算方法：在以图片左下角为原点的坐标系中，圆心坐标为：(w/2，h/2)，在i＝1时，以圆心为原点的坐标系中，X轴正方向，第一个矩形的起始点坐标x1＝0，y1*y1＝r*r-2*2，根据此公式可以算出y的平方，开平方即可算出y值，是矩形的长边长度的一半，所以第一个矩形区域的四个起始坐标以图片左下角为原点的坐标系中，坐标就是(w/2，y1+h/2)

矩形的w＝2，h＝2*y1。后面依次算出每个矩形区域的起始点坐标和宽高即可裁剪出矩形区域。

(5)按照在圆形区域计算矩形大小的位置顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域。

(6)具体的效果及计算排列的分部图如下图所示。虚线绘制的直径与圆的交点C4坐标如图所示，B4的坐标可以根据i直接计算得出，圆心为原点。

在已知，图片宽高和分割间距时，可以依次根据上述所述计算出每个矩形区域的大小，进而算出所需要读取的图片位置区域，按照既定顺序排列好图片的位置显示即可。

本发明大大简化了圆形可视区域的绘制办法，只需要一张png或者jpg的图片即可。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

Claims (2)

1.一种圆形裁剪区域的绘制方法，其特征在于，包括如下步骤：

S1：读取整个图片的图片信息；

S2：根据所述图片信息，计算出图片的最大内切圆的半径；

S3：根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

S4：分别读取每一个矩形区域内的图片信息；

S5：按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

所述图片信息包括但不限于图片的宽度和高度；

所述步骤S3具体包括：

从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积；

所述步骤S4具体包括：

按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息；

从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积，按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息，在以图片左下角为原点的坐标系中，圆心坐标为：(w/2,h/2)，(h/2)*(h/2)＝r*r-(2*i)*(2*i)，r为最大内切圆的半径，i是从原点开始向X轴的两个方向依次延伸，间隔两个像素分割出第i个矩形，i从1开始，以i＝1表示圆心开始的第一个矩形，以圆心为原点的坐标系中，X轴正方向，第一个矩形的起始点坐标(x1，y1)中，x1＝0,y1*y1＝r*r-2*2，开平方计算得到y1值，y1是第一个矩形的长边长度的一半，第一个矩形区域的左上角的起始坐标为(w/2,y1+h/2)，由矩形的宽w＝2，高h＝2*y1，由此得到其他第一个矩形三个点的坐标，依次算出每个矩形区域的起始点坐标和宽高即可裁剪出矩形区域。

2.一种圆形裁剪区域的绘制系统，其特征在于，包括如下模块：

第一读取模块，用于读取整个图片的图片信息；

计算模块，用于根据所述图片信息，计算出图片的最大内切圆的半径；

分割模块，用于根据最大内切圆的半径，将圆形部分区域分割成多个矩形区域；

第二读取模块，用于分别读取每一个矩形区域内的图片信息；

绘制模块，用于按照顺序依次将多个矩形区域拼接，拼接完成后，就是一个完整的圆形显示区域；

所述图片信息包括但不限于图片的宽度和高度；

其特征在于，所述分割模块具体包括：

坐标系建立单元，用于从平行于图片宽度的方向的直径开始，以圆心为原点，以选定的直径方向为Y轴，以垂直此直径方向的直径为X轴建立平面坐标系；

分割单元，用于从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积；

所述第二读取模块，用于按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息，

从原点处间隔2个像素将圆形区域分割，分割后在计算出具体的矩形面积，按照每个矩形区域的像素的起始位置和宽高，分别读取每一个矩形区域内的图片信息，在以图片左下角为原点的坐标系中，圆心坐标为：(w/2,h/2)，(h/2)*(h/2)＝r*r-(2*i)*(2*i)，r为最大内切圆的半径，i是从原点开始向X轴的两个方向依次延伸，间隔两个像素分割出第i个矩形，i从1开始，以i＝1表示圆心开始的第一个矩形，以圆心为原点的坐标系中，X轴正方向，第一个矩形的起始点坐标(x1，y1)中，x1＝0,y1*y1＝r*r-2*2，开平方计算得到y1值，y1是第一个矩形的长边长度的一半，第一个矩形区域的左上角的起始坐标为(w/2,y1+h/2)，由矩形的宽w＝2，高h＝2*y1，由此得到其他第一个矩形三个点的坐标，依次算出每个矩形区域的起始点坐标和宽高即可裁剪出矩形区域。

Images