CN116643831B - Canvas绘制重叠文字的优化方法、装置及其应用 - Google Patents
Canvas绘制重叠文字的优化方法、装置及其应用 Download PDFInfo
- Publication number
- CN116643831B CN116643831B CN202310926779.9A CN202310926779A CN116643831B CN 116643831 B CN116643831 B CN 116643831B CN 202310926779 A CN202310926779 A CN 202310926779A CN 116643831 B CN116643831 B CN 116643831B
- Authority
- CN
- China
- Prior art keywords
- text
- characters
- sub
- overlap
- coordinates
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000005457 optimization Methods 0.000 title claims description 30
- 238000001514 detection method Methods 0.000 claims abstract description 36
- 238000004364 calculation method Methods 0.000 claims abstract description 18
- 238000009877 rendering Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008569 process Effects 0.000 claims description 8
- 230000011218 segmentation Effects 0.000 claims description 3
- 238000000638 solvent extraction Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 6
- 230000005540 biological transmission Effects 0.000 description 5
- 238000012360 testing method Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000013079 data visualisation Methods 0.000 description 3
- 238000003491 array Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 238000009826 distribution Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000007792 addition Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000001131 transforming effect Effects 0.000 description 1
- 238000009827 uniform distribution Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for 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/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2210/00—Indexing scheme for image generation or computer graphics
- G06T2210/62—Semi-transparency
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本申请提出了Canvas绘制重叠文字的优化方法、装置及其应用，包括以下步骤：将屏幕显示区域初步四等分割得到四个子显示区域；对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标；实例化一对象，通过该对象进行递归并存储四个子显示区域；根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内；进行初步文字重叠检测；进行精确文字重叠检测；根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。解决了文字重叠显示问题。
Description
技术领域
本申请涉及数据可视化开发领域，特别是一种涉及Canvas绘制重叠文字的优化方法、装置及其应用。
背景技术
为了在大数据可视化开发上，利用Canvas进行绘制文字效果更突出、容易识别，提供更优质的视觉效果。然而在传统的大数据可视化开发上，利用Canvas绘制文字，文字节点过多会导致屏幕的文字杂乱无章地相互重叠在一起，无法识别的现象，主要有下面这些原因：
a.文字和图案不同，文字的笔画受到干扰就不容易识别；
b.文字重叠次数过多容易导致一大片文字被涂抹了一样的感觉；
c.文字的宽度不是固定了，随着文字的个数不同而不同，不容易计算控制。
但是，Canvas本身没有提供文字重叠的解决方案。因此，亟待一种Canvas绘制重叠文字的优化方法、装置及其应用，能够对文字做重叠检测判断，让顶部的文字高亮，重叠在底部的文字变暗，这样无论文字位置多么杂乱无章，文字宽高如何参差不齐。都能保证顶部的文字突出显示，整理效果也能更好地呈现给用户。
发明内容
本申请实施例提供了一种Canvas绘制重叠文字的优化方法、装置及其应用，针对目前技术存在的文字节点过多会导致屏幕的文字杂乱无章地相互重叠在一起，无法识别的等问题。
本发明核心技术主要是对文字做重叠检测判断，让顶部的文字高亮，重叠在底部的文字变暗。
第一方面，本申请提供了一种Canvas绘制重叠文字的优化方法，所述方法包括以下步骤：
S00、将屏幕显示区域初步四等分割得到四个子显示区域；
S10、对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；
其中，计算区域大于屏幕显示区域，且屏幕显示区域位于计算区域中心位置；
S20、实例化一对象，通过该对象进行递归并存储四个子显示区域；
S30、根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内或递归达到最大层级；
S40、进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；
S50、进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；
S60、根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。
进一步地，S00步骤中，四个子显示区域包括左上、右上、左下、右下四个区域或从左往右四个区域或上下左右四个区域或从上到下四个区域。
进一步地，S00步骤中，四个子显示区域包括左上、右上、左下、右下四个区域。这种划分方式将屏幕显示区域划分为四个矩形区域，可以适应各种文字布局和屏幕尺寸。它可以提供一种相对均匀的分布，使得文字在四个区域中更平衡地显示。
进一步地，S00-S60步骤中，仅对位于计算区域内的文字进行计算和渲染。为了保证在百万级大数据设置千万级大数据下的性能，能起到决定性的优化作用（计算性能和渲染性能不被数据量的大小所影响），这个设计是尤为关键的一步。
进一步地，S30步骤中，通过文字节点的对角坐标与子显示区域的对角坐标比较，判断文字节点的归属。可以实现文字节点的准确分配和布局，确保文字在各个子显示区域内以合适的方式进行显示。这有助于提升重叠文字优化方案的效果，使得绘制出的文字在视觉上更加清晰、有序，避免了文字重叠和混乱的问题。
进一步地，S40步骤中，每个子显示区域内的文字同同区域的文字进行重叠检测。可以提前发现和记录文字重叠的情况，并为后续的绘制操作和优化提供依据，最重要的是避免不必要的计算，因为不是同区域的文字不可能存在重叠的情况。这有助于改善重叠文字的视觉效果，使文字布局更加清晰、有序，增强文字的可读性和用户体验。
进一步地，S30步骤中，递归划分的最大层级根据屏幕显示区域的大小而定，至少为两级。通过递归划分到更大层级，可以将屏幕显示区域进一步细分为更小的子显示区域，使得文字的布局更加精细和准确。这有助于更好地管理和处理文字的位置，使文字在屏幕上的分布更加均匀和有序。根据屏幕显示区域的大小确定递归划分的最大层级，可以根据不同的屏幕尺寸和分辨率进行灵活的适配。这有助于在各种屏幕大小和设备上实现文字布局的优化，提供更好的用户体验。
第二方面，本申请提供了一种Canvas绘制重叠文字的优化装置，包括：
分割模块，将屏幕显示区域初步四等分割得到四个子显示区域；
计算模块，对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；其中，计算区域大于屏幕显示区域，且屏幕显示区域位于计算区域中心位置；
实例化模块，实例化一对象，通过该对象进行递归并存储四个子显示区域；
递归模块，根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内；
重叠检测模块，进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；
文字绘制模块，根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。
第三方面，本申请提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的Canvas绘制重叠文字的优化方法。
第四方面，本申请提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据上述的Canvas绘制重叠文字的优化方法。
本发明的主要贡献和创新点如下：1、与现有技术相比，本申请利用仅计算计算区域的文字重叠情况内，解决大数据下计算量大性能差的问题，做到不受数据量的影响，保证本方法的全面性，同时利用分区的思想，再次减少文字重叠计算量；防止文字与每个文字都要发生一次重叠计算；
2、与现有技术相比，本申请通过加强顶部文字的可见性和减弱底部文字的可见性，绘制的文字在视觉上更加清晰，避免了重叠导致的文字难以辨认和混乱的问题。同时，增加透明度使得底部重叠的文字也能够识别，不会被完全遮挡，提升了文字的可读性和用户的视觉体验。
本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例的Canvas绘制重叠文字的优化方法的流程；
图2是文字计算绘制范围说明图；
图3是文字位置属性说明图；
图4是检测区域划分说明图；
图5是文字重叠优化前后对比效果图；
图6是根据本申请实施例的电子装置的硬件结构示意图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
为了方便理解本方案，先对Canvas进行解释，Canvas是一个HTML5元素，用于通过JavaScript脚本绘制图形、动画和其他可视化内容。它提供了一个基于位图的绘图区域，可以通过JavaScript代码进行动态绘制和操作。具体来说，Canvas可以用于在网页上创建和操作二维图形，包括直线、曲线、矩形、圆形、文本等。开发者可以使用Canvas API通过绘制路径、填充颜色、设置样式、变换矩阵等操作来绘制和渲染图形。Canvas的优点在于它提供了一个灵活且高性能的绘图环境。由于所有的绘制操作都是通过JavaScript进行控制，开发者可以根据需要动态更新和交互绘制的图形。Canvas也支持事件处理，可以响应用户的交互操作。
实施例一
本申请旨在提出一种Canvas绘制重叠文字的优化方法，具体地，参考图1，所述方法包括：
S00、将屏幕显示区域初步四等分割得到四个子显示区域；
在本实施例中，获取显示器宽度和高度，再计算出宽高的比例，然后对屏幕进行初步四等分割，优选分为左上、右上、左下、右下四个子显示区域，可以提供一种相对均匀的分布，使得文字在四个区域中更平衡地显示，也方便后续文字节点是否位于子显示区域内的计算操作。当然也可以是如从左往右四个区域或上下左右四个区域或从上到下四个区域等。
S10、对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；
在本实施例中，对计算区域内所有文字节点位置进行计算并且标识为左上角x0、y0，右下角x1、y1。
其中，计算区域大于屏幕显示区域，且屏幕显示区域位于计算区域中心位置，即如图2所示，其中实线方框表示的是屏幕的显示区域大小，而虚线框表示的是实际需要计算文字重叠的计算区域大小。虚线框相对于实线框，在上、下、左、右都扩大了200px（实际应该扩大多少，可以根据实际情况做出调整）。之所以计算区域实际大小要大于屏幕的显示区域，是考虑到一些边缘情况：
1.在画布发生上、下、左、右拖动的时候，在渲染过度上能显得更平滑，无跳帧的情况。
2.兼容一些屏幕显示区域边缘的文字能正常渲染出来，例如图1中，加大加粗的“边缘文字”。有一些溢出了屏幕显示区域，但是它却在计算区域内。以此用来兼容边缘文字的特殊情况。
同时，在虚线框外的文字，不做计算也不渲染。这样做的目的，是为了保证在百万级大数据设置千万级大数据下的性能，能起到决定性的优化作用（计算性能和渲染性能不被数据量的大小所影响），这个设计是尤为关键的一步，保证了本申请在大数据的情况下，仍然可行性。
S20、实例化一对象，通过该对象进行递归并存储四个子显示区域；
在本实施例中，实例化一个对象，用这个对象进行递归存储位置的四个区域：左上、右上、左下、右下。
其中，“实例化一个对象”指的是创建一个数据结构或类的实例，用于存储和管理文字节点的位置信息和其他相关属性。这个对象可以是一个自定义的类的实例，也可以是一个字典（dictionary）或JSON对象等数据结构的实例。通过实例化一个对象，可以使用该对象来递归地存储和管理文字节点的位置信息，将屏幕划分为不同的区域，并在后续的步骤中将文字对象添加到相应的区域中。这个对象可以提供一种方便的方式来组织和操作文字节点，以便进行文字重叠的检测和绘制优化。
S30、根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内或达到递归最大层级；
在本实施例中，开始向实例化的对象里添加文字对象，根据文字对象的位置，决定文字应该属于哪个区域。每当添加四次，进行一次递归。分别把四个区域再次细分为四个区域。即比如有1000个文本对象，一个个向归属区域对象添加，到第5个的时候，需要重新初步计算当前文字归属于哪个大区域，并对这个大区域再次进行四等分，然后再次确定这个文本归属于哪个小区域。
S40、进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；
在本实施例中，初次进行文字之间的重叠检测，检测这个文字位置可能与哪些区域发生重叠，并且获取可能发生重叠的除自身以外的其他文字。
S50、进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；
在本实施例中，再次对文字进行精准检测，根据文字的左上角x0、y0，右下角x1、y1。对文字进行重叠检测判断。检测过的文字打上标记，防止重复检测判断。检测出重叠的文字也打上重叠的标记。
S60、根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。
在本实施例中，对于顶部文字做正常高亮绘制；对于底部没有重叠的文字也做正常高亮绘制；对于底部文字有重叠标记的，绘制的时候加上透明度属性；从而达到顶部的文字突出显示，底部重叠文字变暗显示，且因为增加透明度使得底部重叠的文字也可以识别不被遮挡。
在本实施例中，图3是对文字的位置属性作出说明：一个文字的位置有四个属性，x0、y0记录的是左上角的坐标，其中x0表示的是左上角横坐标，y0表示的是左上角纵坐标；x1、y1记录的是右下角的坐标，其中x1表示的是右下角横坐标，y1表示的是右下角纵坐标；每个文字对象，都有这四个位置数据。
计算区域位置的四个属性，s_x0、s_y0记录的是计算区域的左上角坐标，其中s_x0表示的是左上角横坐标，s_y0表示的是左上角纵坐标；s_x1、s_y1记录的是右下角的坐标，其中s_x1表示的是右下角横坐标，s_y1表示的是右下角纵坐标。
通过计算区域位置的四个属性s_x0、s_y0、s_x1、s_y1与文字的四个属性x0、y0、x1、y1作比较，就能判断文字是否在计算区域内：当x0大于s_x0且x1小于s_x1，且y0大于s_y0且y1小于s_y1。遍历所有文字位置，获取且当文字位置满足上述条件的文字。用数组保存这些文字，用来计算文字是否重叠并且做渲染。当Canvas画布发生缩放和平移时，重新做一次上述的位置判断，获取满足位置条件的文字，用数组保存文字，重新计算文字是否重叠并且做渲染。
图4是检测区域划分说明图：为快速检测出哪些文字互相重叠，利用传统的每个文字一一比对位置检测判断文字是否重叠是极其消耗性能的（例如：1w个文字相互比对，要比对9999w次），会导致计算慢渲染卡的现象。呈现给用户的视觉体验非常不好。所以这里引入一种适合文字重叠判断的计算方法，用来优化加速文字的检测判断。
首先将屏幕划分为四个板块，左上、右上、左下、右下。这里作出说明：完全包含在右下板块的文字，不可能会和左上、右上、左下板块内的文字发生重叠。基于这种算法思想，右下板块的文字只需要和同属于右下板块的文字做重叠测试。同理每个板块内文字只需要和同属板块内的文字做重叠测试。为了进一步优化性能，这种方式可以进行递归，在每个板块内再次进行四等分划分，如图3中，将左上区域再次划分为四等分。
为了更方便理解本方案，下面进行实现说明：
1）如图1-3所示，实例化一个板块（板块对应显示区域）划分的对象，初次设置四个属性分别为左上、右上、左下、右下，数据类型为数组，用来存储文字数据。
2）遍历上一步图3中获取到的满足位置条件的文字数组，判断文字满足于哪些区域，如图3中“跨域文字”，同时满足左下区域板块、右下区域板块。将其同时添加到板块划分的对象的左下、右下属性对应的数组中。每执行4次，就做一次递归判断，对左上、右上、左下、右下四个板块区域（相当于子显示区域）的文字再次进行细分。同时可以设置最大层级限制，当递归划分到最大层级，就不再进行细分。默认最大层级为4，也就是数组嵌套深度是4。
3）第一次进行初步判断：再次遍历上一步图3中获取到的满足位置条件的文字数组，一一取出文字去板块划分的对象中获取可能发生重叠的文字，如图3中“检测文字”，获取到可能发生重叠的文字有：左上文字D、右上文字、左下文字、跨区文字、右下文字、检测文字；需要排除正在发生重叠测试的文字自身“检测文字”，把获取到的可能发生重叠的文字并且排除自身的那些文字保存到准备测试文字数组中。这里如果是图3中“左下文字”，则获取到的可能发生重叠的文字就只有跨区文字和检测文字，因为只判断同区域的文字的重叠情况，而跨区文字和检测文字正好也是属于左下区域。
4）进一步精准判断：遍历准备测试文字数组，一一取出被检测文字C的位置（c_x0、c_y0、c_x1、c_y1）和检测文字的位置（x0、y0、x1、y1）做比对测试，当（c_x1大于x0且c_y1大于y1）或者（x1大于c_x0且y1大于c_y0），表示两者不发生重叠，否则给被检测文字C标记为重叠属性（重叠标记）。如图4中，“左上文字D”不满足上述两者不发生重叠条件，被标记上重叠属性。
5）如图5所示，进行绘制文字，对于有重叠属性的文字绘制的时候加上0.2（透明度值，取值在0~1之间，最高为1即百分百透明，完全不可见）的透明度属性；对于没有重叠属性的文字，绘制时候不加透明度属性。这样顶部的文字和不发生重叠的文字，就突出显示，而重叠的文字因为有透明度就变淡变暗，呈现弱显示状态。又因有透明度，重叠在底部的文字也可以被识别出来。可见图5中，优化前存在重叠的文字，在优化后部分文字是透明的，更加清晰易识别。
实施例二
基于相同的构思，本申请还提出了一种Canvas绘制重叠文字的优化装置，包括：
分割模块，将屏幕显示区域初步四等分割得到四个子显示区域；
计算模块，对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；其中，计算区域大于屏幕显示区域，且屏幕显示区域位于计算区域中心位置；
实例化模块，实例化一对象，通过该对象进行递归并存储四个子显示区域；
递归模块，根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内或达到递归最大层级；
重叠检测模块，进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；
文字绘制模块，根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。
实施例三
本实施例还提供了一种电子装置，参考图6，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
具体地，上述处理器402可以包括中央处理器（CPU），或者特定集成电路（ApplicationSpecificIntegratedCircuit，简称为ASIC），或者可以被配置成实施本申请实施例的一个或多个集成电路。
其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器（HardDiskDrive，简称为HDD）、软盘驱动器、固态驱动器（SolidStateDrive，简称为SSD）、闪存、光盘、磁光盘、磁带或通用串行总线（UniversalSerialBus，简称为USB）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除（或固定）的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性（Non-Volatile）存储器。在特定实施例中，存储器404包括只读存储器（Read-OnlyMemory，简称为ROM）和随机存取存储器（RandomAccessMemory，简称为RAM）。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM（ProgrammableRead-OnlyMemory，简称为PROM）、可擦除PROM（ErasableProgrammableRead-OnlyMemory，简称为EPROM）、电可擦除PROM（ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM）、电可改写ROM（ElectricallyAlterableRead-OnlyMemory，简称为EAROM）或闪存（FLASH）或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器（StaticRandom-AccessMemory，简称为SRAM）或动态随机存取存储器（DynamicRandomAccessMemory，简称为DRAM），其中，DRAM可以是快速页模式动态随机存取存储器404（FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM）、扩展数据输出动态随机存取存储器（ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM）、同步动态随机存取内存（SynchronousDynamicRandom-AccessMemory，简称SDRAM）等。
存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。
处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种Canvas绘制重叠文字的优化方法。
可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。
传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器（Network Interface Controller，简称为NIC），其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频（Radio Frequency，简称为RF）模块，其用于通过无线方式与互联网进行通讯。
输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是优化前的数据等，输出的信息可以是优化后的显示界面等。
实施例四
本实施例还提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据实施例一的Canvas绘制重叠文字的优化方法。
需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。
本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤，或者互连的逻辑电路、框和功能，或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质，以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。
本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以作出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。
Claims (8)
1.一种Canvas绘制重叠文字的优化方法，其特征在于，包括以下步骤：
S00、将屏幕显示区域初步四等分割得到四个子显示区域；
S10、对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；
其中，所述计算区域大于所述屏幕显示区域，且所述屏幕显示区域位于所述计算区域中心位置；
S20、实例化一对象，通过该对象进行递归并存储四个所述子显示区域；
S30、根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内或达到递归最大层级；
S40、进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；
其中，每个子显示区域内的文字同同区域的文字进行重叠检测；
S50、进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；
S60、根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性；
其中，上述步骤仅对位于所述计算区域内的文字进行计算和渲染。
2.如权利要求1所述的一种Canvas绘制重叠文字的优化方法，其特征在于，S00步骤中，四个所述子显示区域包括左上、右上、左下、右下四个区域或从左往右四个区域或上下左右四个区域或从上到下四个区域。
3.如权利要求2所述的一种Canvas绘制重叠文字的优化方法，其特征在于，S00步骤中，四个所述子显示区域包括左上、右上、左下、右下四个区域。
4.如权利要求1所述的一种Canvas绘制重叠文字的优化方法，其特征在于，S30步骤中，通过文字节点的对角坐标与子显示区域的对角坐标比较，判断文字节点的归属。
5.如权利要求1-4任意一项所述的一种Canvas绘制重叠文字的优化方法，其特征在于，S30步骤中，递归划分的最大层级根据屏幕显示区域的大小而定，至少为两级。
6.一种Canvas绘制重叠文字的优化装置，其特征在于，包括：
分割模块，将屏幕显示区域初步四等分割得到四个子显示区域；
计算模块，对计算区域内所有文字节点位置进行计算并标识每个文字对角的坐标，包括左上角和右下角的坐标或右上角和左下角的坐标；其中，计算区域大于屏幕显示区域，且屏幕显示区域位于计算区域中心位置；仅对位于所述计算区域内的文字进行计算和渲染；
实例化模块，实例化一对象，通过该对象进行递归并存储四个子显示区域；
递归模块，根据文字对象的位置，向实例化的对象添加文字对象，每添加四次进行一次递归，再次把对应的子显示区域再次分割为四个新的子显示区域，直至所有文字划分到相应的子显示区域内或达到递归最大层级；
重叠检测模块，进行初步文字重叠检测，找出文字节点之间可能存在的重叠情况；进行精确文字重叠检测，根据每个文字节点的对角的坐标进行重叠判断，将初步重叠检测过的文字节点打上重叠标记，同时将新检测出的文字节点打上重叠标记；其中，每个子显示区域内的文字同同区域的文字进行重叠检测；
文字绘制模块，根据最终的重叠情况，进行文字的绘制，对于顶部文字和底部无重叠标记的文字进行高亮绘制，对于底部有重叠标记的文字加上透明度属性。
7.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至5任一项所述的Canvas绘制重叠文字的优化方法。
8.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至5任一项所述的Canvas绘制重叠文字的优化方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310926779.9A CN116643831B (zh) | 2023-07-27 | 2023-07-27 | Canvas绘制重叠文字的优化方法、装置及其应用 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310926779.9A CN116643831B (zh) | 2023-07-27 | 2023-07-27 | Canvas绘制重叠文字的优化方法、装置及其应用 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116643831A CN116643831A (zh) | 2023-08-25 |
| CN116643831B true CN116643831B (zh) | 2023-10-13 |
Family
ID=87643764
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310926779.9A Active CN116643831B (zh) | 2023-07-27 | 2023-07-27 | Canvas绘制重叠文字的优化方法、装置及其应用 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116643831B (zh) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2007067662A (ja) * | 2005-08-30 | 2007-03-15 | Nec Personal Products Co Ltd | 描画方法、データ放送受信装置およびプログラム |
| CN103778213A (zh) * | 2014-01-16 | 2014-05-07 | 北京航空航天大学 | 一种基于占用矩阵的词云图可视化方法 |
| CN106155728A (zh) * | 2015-04-20 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 一种用于支持canvas的浏览器的检测字体的方法和装置 |
| CN107346250A (zh) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | 一种呼吸灯效果的进度条的层叠显示算法 |
| CN109814977A (zh) * | 2019-02-02 | 2019-05-28 | 珠海金山网络游戏科技有限公司 | 一种文字显示方法、装置、计算设备及存储介质 |
| CN113132526A (zh) * | 2019-12-31 | 2021-07-16 | 华为技术有限公司 | 一种页面绘制方法及相关装置 |
| CN113762235A (zh) * | 2021-02-01 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 检测页面叠加区域的方法和装置 |
| CN113934340A (zh) * | 2021-09-22 | 2022-01-14 | 青岛海信移动通信技术股份有限公司 | 一种终端设备和进度条显示方法 |
| CN113936137A (zh) * | 2020-07-10 | 2022-01-14 | 中国人寿资产管理有限公司 | 一种去除图像型文本行检测区域重叠的方法、系统及存储介质 |
| CN114741632A (zh) * | 2022-03-31 | 2022-07-12 | 网易有道信息技术（北京）有限公司 | 用于对网页中关键字进行展示的方法及其相关产品 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7574664B2 (en) * | 2001-02-15 | 2009-08-11 | Nbor Corporation | Methods for recursive spacing and touch transparency of onscreen objects |
| US8610714B2 (en) * | 2010-10-19 | 2013-12-17 | Apple Inc. | Systems, methods, and computer-readable media for manipulating graphical objects |
-
2023
- 2023-07-27 CN CN202310926779.9A patent/CN116643831B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2007067662A (ja) * | 2005-08-30 | 2007-03-15 | Nec Personal Products Co Ltd | 描画方法、データ放送受信装置およびプログラム |
| CN103778213A (zh) * | 2014-01-16 | 2014-05-07 | 北京航空航天大学 | 一种基于占用矩阵的词云图可视化方法 |
| CN106155728A (zh) * | 2015-04-20 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 一种用于支持canvas的浏览器的检测字体的方法和装置 |
| CN107346250A (zh) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | 一种呼吸灯效果的进度条的层叠显示算法 |
| CN109814977A (zh) * | 2019-02-02 | 2019-05-28 | 珠海金山网络游戏科技有限公司 | 一种文字显示方法、装置、计算设备及存储介质 |
| CN113132526A (zh) * | 2019-12-31 | 2021-07-16 | 华为技术有限公司 | 一种页面绘制方法及相关装置 |
| CN113936137A (zh) * | 2020-07-10 | 2022-01-14 | 中国人寿资产管理有限公司 | 一种去除图像型文本行检测区域重叠的方法、系统及存储介质 |
| CN113762235A (zh) * | 2021-02-01 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 检测页面叠加区域的方法和装置 |
| CN113934340A (zh) * | 2021-09-22 | 2022-01-14 | 青岛海信移动通信技术股份有限公司 | 一种终端设备和进度条显示方法 |
| CN114741632A (zh) * | 2022-03-31 | 2022-07-12 | 网易有道信息技术（北京）有限公司 | 用于对网页中关键字进行展示的方法及其相关产品 |
Non-Patent Citations (2)
| Title |
|---|
| 基于HTML5 Canvas的态势符号标绘系统设计与实现;彭宁叶子;邓轶;范甲昊;严涵;叶远智;任福;;测绘与空间地理信息(第02期);全文 * |
| 陶月锋 ; 姜维 ; 张重生 ; .场景文字检测算法的漏检问题研究.河南大学学报(自然科学版).2020,(第05期),全文. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116643831A (zh) | 2023-08-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8194974B1 (en) | Merge and removal in a planar map of an image | |
| CN110990516B (zh) | 地图数据的处理方法、装置和服务器 | |
| KR102055035B1 (ko) | 회로 설계 레이아웃에서의 채널에 대한 혼잡 표시자의 디스플레이 | |
| CN106611401B (zh) | 一种在纹理内存中存储图像的方法及装置 | |
| KR20150109276A (ko) | 그래픽 처리 시스템 | |
| CN109189390B (zh) | 自动生成布局文件的方法、存储介质 | |
| US11620503B2 (en) | Neural network processing | |
| CN116643831B (zh) | Canvas绘制重叠文字的优化方法、装置及其应用 | |
| CN107168961B (zh) | 图表的数据展示方法及装置 | |
| CN114527980A (zh) | 一种显示渲染方法、装置、电子设备和可读存储介质 | |
| CN107621951B (zh) | 一种视图层级优化的方法及装置 | |
| CN111857704A (zh) | 一种布局关系的代码生成方法及装置 | |
| CN111460764B (zh) | 电子书籍标注方法、电子设备及存储介质 | |
| CN114692034A (zh) | 图像显示方法、装置、电子设备及计算机存储介质 | |
| CN106558019B (zh) | 图片排列方法及装置 | |
| CN113168412A (zh) | 数据过滤设备 | |
| CN112579927A (zh) | 显示导航栏的方法和装置 | |
| CN111428455B (zh) | 表格管理方法、装置、设备及存储介质 | |
| CN115249303A (zh) | 基于图纸分割的布点绘制方法、装置、设备及存储介质 | |
| CN110533742B (zh) | 一种图像填色方法、装置、设备及存储介质 | |
| CN112767419A (zh) | 一种图集九宫格切割的方法及系统 | |
| CN109960561B (zh) | 页面元素的显示方法、装置和电子设备 | |
| CN112100546A (zh) | 表单的加载方法、装置、存储介质和电子设备 | |
| CN111353272A (zh) | 一种web表格的信息显示方法和装置 | |
| CN110838165B (zh) | 基于svg的图形渲染方法以及装置 |
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 |