CN112395827B - 一种树状结构图的绘制方法以及移动终端 - Google Patents

一种树状结构图的绘制方法以及移动终端 Download PDF

Info

Publication number
CN112395827B
CN112395827B CN202011265217.7A CN202011265217A CN112395827B CN 112395827 B CN112395827 B CN 112395827B CN 202011265217 A CN202011265217 A CN 202011265217A CN 112395827 B CN112395827 B CN 112395827B
Authority
CN
China
Prior art keywords
node
tree structure
color
color blocks
canvas
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
CN202011265217.7A
Other languages
English (en)
Other versions
CN112395827A (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.)
China Life Insurance Co ltd
Original Assignee
China Life Insurance 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 China Life Insurance Co ltd filed Critical China Life Insurance Co ltd
Priority to CN202011265217.7A priority Critical patent/CN112395827B/zh
Publication of CN112395827A publication Critical patent/CN112395827A/zh
Application granted granted Critical
Publication of CN112395827B publication Critical patent/CN112395827B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
    • G06F16/31—Indexing; Data structures therefor; Storage structures
    • G06F16/316—Indexing structures
    • G06F16/322—Trees
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Image Generation (AREA)

Abstract

本发明公开了一种树状结构图的绘制方法以及移动终端，所述方法包括：对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。应用本发明可以适合于在移动终端上展示树状结构图。

Description

一种树状结构图的绘制方法以及移动终端
技术领域
本发明涉及移动终端技术领域，特别是指一种树状结构图的绘制方法以及移动终端。
背景技术
在计算机技术领域——诸多图表类库中，树状图绘制更适用于展示多层级复杂的团队组织架构，多以Canvas(画布)绘制技术为基础，再进行数据渲染，在该领域内，由于网页端屏幕范围大，容纳信息多等优势，通过计算各层级父子节点数量，分析渲染对应数据，进而完成打开/关闭操作，实现效果相比移动端更能使用户易操作、易浏览。
例如，实际业务中，团队组织人员达百级以上时，可以网页端绘制树状图展示团队组织架构人员分配，使得用户快速了解所属团队组织架构人员分配。
目前行业内现有Echarts技术绘制树状图的方法中，首先在网页端固定设置Canvas画布，进而使用Canvas基础绘制方法，绘制fillText(文字)、stroke(线条)；通过计算各层级父子节点数量，完成节点名称+线条的绘制。
然而传统的树状图绘制展现模式多以网页端为主，在移动终端上进行展示则存在诸多问题：
Echarts树状结构图，显示区域大小固定，不支持移动端自动化扩展；通常，放大操作后，绘制出的文字出现严重虚化；此外，当子节点过多时，会出现明显的数据堆叠现象，如图1所示；个性化展示过于局限，仅支持单色调更换，不能满足移动端个性化主题、全方位拖拽等需求。
发明内容
有鉴于此，本发明的目的在于提出一种树状结构图的绘制方法以及移动终端，可以适合于在移动终端上展示树状结构图。
基于上述目的，本发明提供一种树状结构图的绘制方法，包括：
对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；
根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。
进一步，在所述利用Canvas绘制所述树状结构的各节点的色块和线条之前，还包括：
统计所述树状结构中节点层级个数；
根据显示屏的宽度，以及统计出的节点层级个数，计算出每个节点的色块的宽度；
根据节点的色块的宽度，按设定比例计算节点的色块的高度；
根据各节点在所述树状结构中的位置，以及各节点的色块的大小，确定各节点的色块在显示屏中的位置坐标。
其中，所述利用Canvas绘制所述树状结构的各节点的色块，具体包括：
根据各节点的色块在显示屏中的大小、位置坐标，以及预设的节点的颜色显示规则，利用Canvas绘制所述树状结构的各节点的色块。
其中，所述根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染，具体包括：
根据各节点的色块的大小确定各节点的文字信息的字号大小；
根据各节点的文字信息的字号大小，以及各节点的色块的位置坐标，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。
进一步，在所述使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染之后，还包括：
在所述树状结构的各父节点的色块处绘制折叠标志；以及所述方法还包括：
在接收到一个节点的色块处的折叠标志的点击指令后，将所述树状结构中该节点下的结构去除，形成新的树状结构；
利用Canvas绘制所述新的树状结构的各节点的色块和线条，并使用树状结构插件将所述新的树状结构的各节点的文字信息在对应色块处进行数据渲染。
进一步，在所述利用Canvas绘制所述新的树状结构的各节点的色块和线条时，还包括：
在所述折叠标志的点击指令所涉及的节点的色块处显示绘制展开标志；以及所述方法还包括：
在接收到一个节点的色块处的展开标志的点击指令后，将该节点下的结构添加进来，形成更新后的树状结构；
利用Canvas绘制所述更新后的树状结构的各节点的色块和线条，并使用树状结构插件将所述更新后的树状结构的各节点的文字信息在对应色块处进行数据渲染。
进一步，所述方法还包括：
在接收到放大/缩小指令后，根据放大/缩小比例计算出当前的显示比例；
根据当前位于显示屏中心位置处的节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；
利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
进一步，所述方法还包括：
在接收到拖拽指令后，判断出拖在位于显示屏中心位置处的待显示的节点；
根据判断出的中心节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；
利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
本发明还提供一种移动终端，包括中央处理单元、信号处理和存储单元，以及存储在信号处理和存储单元上并可在中央处理单元上运行的计算机程序，其中，所述中央处理单元执行如上所述的一种树状结构图的绘制方法。
本发明的技术方案中，对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。由于节点的文字信息是通过数据渲染的方式进行显示，因此，不论是放大还是缩小操作，数据渲染方式显示的文字均不会出现绘制方式显示的文字的因像素分辨率不够高的原因而出现的虚化问题。
此外，本发明的技术方案中，由于节点的色块，即节点的显示区域是根据显示屏的宽度，以及统计出的节点层级个数计算出的，可以保留出色块间的缝隙，从而避免节点堆叠的现象。而根据预设的节点的颜色显示规则来显示节点的色块，既有利于进行节点的区分，又可以个性化来展示树状结构，可以满足移动终端的个性化主题，从而适合于在移动终端上展示树状结构图。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为现有技术绘制的出现数据堆叠现象的树状图；
图2为本发明实施例提供的一种树状结构图的绘制方法的流程图；
图3为本发明实施例提供的一种绘制树状结构的各节点的色块和线条的方法流程图；
图4为本发明实施例提供的绘制的一种树状结构各节点的色块和线条的示意图；
图5为本发明实施例提供的一种使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染的方法流程图；
图6为本发明实施例提供的一种将文字信息在对应色块处进行数据渲染的示意图；
图7为本发明实施例提供的一种移动终端硬件结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。
需要说明的是，除非另外定义，本发明实施例使用的技术术语或者科学术语应当为本公开所属领域内具有一般技能的人士所理解的通常意义。本公开中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则该相对位置关系也可能相应地改变。
下面结合附图详细说明本发明实施例的技术方案。
本发明实施例提供的一种树状结构图的绘制方法的具体流程，如图2所示，包括如下步骤：
步骤S201：对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条。
本步骤中，绘制所述树状结构的各节点的色块和线条的具体方法流程，如图3所示，包括如下子步骤：
子步骤S301：统计所述树状结构中节点层级个数；
子步骤S302：根据显示屏的宽度，以及统计出的节点层级个数，计算出节点的色块的宽度；
其中，所述节点的色块的大小为该节点的显示区域的大小；一般而言，节点层级个数越多，计算出的节点的色块的宽度越小。
子步骤S303：根据节点的色块的宽度，按设定比例计算节点的色块的高度。
在本子步骤中确定了色块的宽度、高度，即确定了色块的大小。
子步骤S304：根据各节点在所述树状结构中的位置，以及各节点的色块的大小，确定各节点的色块在显示屏中的位置坐标。
子步骤S305：根据各节点的色块在显示屏中的大小、位置坐标，以及预设的节点的颜色显示规则，利用Canvas绘制所述树状结构的各节点的色块和线条。
其中，绘制的线条连接在具有父子关系的节点的色块之间；所述色块的颜色是根据预设的节点的颜色显示规则确定的；例如，预设的节点的颜色显示规则可以是从第1级节点至最后1级节点的颜色依次为赤、橙、黄、绿、青、蓝、紫……。
例如，绘制出的树状结构的各节点的色块和线条如图4所示。
步骤S202：根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。
本步骤中，将所述树状结构的各节点的文字信息在对应色块处进行数据渲染的具体方法，流程如图5所示，包括如下子步骤：
子步骤S501：根据各节点的色块的大小确定各节点的文字信息的字号大小。
一般而言，色块越大则文字信息的字号越大，可以根据各节点的色块的大小，以及节点的文字个数，来计算节点的文字信息的字号大小。
子步骤S502：根据各节点的文字信息的字号大小，以及各节点的色块的位置坐标，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。
例如，将节点的文字信息在对应色块处进行数据渲染后的一种示意图如图6所示。
步骤S203：在所述树状结构的各父节点的色块处绘制折叠标志或展开标志；
例如，如图6所示，在节点的色块处绘制的展开标志可以是一个圆圈内显示的数字，该数字可以指示出该节点下的子节点的个数；在节点的色块处绘制的折叠标志可以是一个圆圈内显示一个减号。
步骤S204：在接收到一个节点的色块处的折叠标志的点击指令后，重新重新绘制折叠了部分结构的树状结构。
具体地，在接收到一个节点的色块处的折叠标志的点击指令后，将所述树状结构中该节点下的结构去除，形成新的树状结构；
利用Canvas绘制所述新的树状结构的各节点的色块和线条，绘制方法可与上述步骤S201中的方法一样，此处不再赘述。
进而使用树状结构插件将所述新的树状结构的各节点的文字信息在对应色块处进行数据渲染，数据渲染方法可与上述步骤S202中的方法一样，此处不再赘述。
此外，在所述折叠标志的点击指令所涉及的节点的色块处显示绘制展开标志。
步骤S205：在接收到一个节点的色块处的展开标志的点击指令后，重新重新绘制展开了部分结构的树状结构。
具体地，在接收到一个节点的色块处的展开标志的点击指令后，将该节点下的结构添加进来，形成更新后的树状结构；
利用Canvas绘制所述更新后的树状结构的各节点的色块和线条，绘制方法可与上述步骤S201中的方法一样，此处不再赘述。
进而使用树状结构插件将所述更新后的树状结构的各节点的文字信息在对应色块处进行数据渲染，数据渲染方法可与上述步骤S202中的方法一样，此处不再赘述。
进一步，本发明实施例提供的一种树状结构图的绘制方法还可包括：放大、缩小树状结构、拖拽树状结构、以及点击节点获取详情的方法，具体如下：
若接收到放大指令，根据放大比例计算出当前的显示比例；若接收到缩小指令，根据缩小比例计算出当前的显示比例；进而根据当前位于显示屏中心位置处的节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；然后，利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
若接收到拖拽指令，则在判断出拖在位于显示屏中心位置处的待显示的节点后，根据判断出的中心节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；进而利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
若接收到一个节点的点击指令，则显示该节点的详细信息。
图7示出了本实施例所提供的一种更为具体的移动终端硬件结构示意图，该终端可以包括：处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。
处理器1010可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的一种树状结构图的绘制方法。
存储器1020可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。
输入/输出接口1030用于连接输入/输出模块，可以与非线性接收机相连，从非线性接收机接收信息，实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。
通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。
总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。
需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。
本发明的技术方案中，对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。由于节点的文字信息是通过数据渲染的方式进行显示，因此，不论是放大还是缩小操作，数据渲染方式显示的文字均不会出现绘制方式显示的文字的因像素分辨率不够高的原因而出现的虚化问题。
此外，本发明的技术方案中，由于节点的色块，即节点的显示区域是根据显示屏的宽度，以及统计出的节点层级个数计算出的，可以保留出色块间的缝隙，从而避免节点堆叠的现象。而根据预设的节点的颜色显示规则来显示节点的色块，既有利于进行节点的区分，又可以个性化来展示树状结构，可以满足移动终端的个性化主题，从而适合于在移动终端上展示树状结构图。
本实施例的计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。
所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本公开的范围(包括权利要求)被限于这些例子；在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化，为了简明它们没有在细节中提供。
另外，为简化说明和讨论，并且为了不会使本发明难以理解，在所提供的附图中可以示出或可以不示出与集成电路(IC)芯片和其它部件的公知的电源/接地连接。此外，可以以框图的形式示出装置，以便避免使本发明难以理解，并且这也考虑了以下事实，即关于这些框图装置的实施方式的细节是高度取决于将要实施本发明的平台的(即，这些细节应当完全处于本领域技术人员的理解范围内)。在阐述了具体细节(例如，电路)以描述本发明的示例性实施例的情况下，对本领域技术人员来说显而易见的是，可以在没有这些具体细节的情况下或者这些具体细节有变化的情况下实施本发明。因此，这些描述应被认为是说明性的而不是限制性的。
尽管已经结合了本发明的具体实施例对本发明进行了描述，但是根据前面的描述，这些实施例的很多替换、修改和变型对本领域普通技术人员来说将是显而易见的。例如，其它存储器架构(例如，动态RAM(DRAM))可以使用所讨论的实施例。
本发明的实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本发明的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种树状结构图的绘制方法，其特征在于，包括：
对于待显示的树状结构，利用画布Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；
根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染；
在所述利用画布Canvas绘制所述树状结构的各节点的色块和线条之前，还包括：
统计所述树状结构中节点层级个数；
根据显示屏的宽度，以及统计出的节点层级个数，计算出每个节点的色块的宽度；
根据节点的色块的宽度，按设定比例计算节点的色块的高度；
根据各节点在所述树状结构中的位置，以及各节点的色块的大小，确定各节点的色块在显示屏中的位置坐标；
所述利用Canvas绘制所述树状结构的各节点的色块，具体包括：
根据各节点的色块在显示屏中的大小、位置坐标，以及预设的节点的颜色显示规则，利用Canvas绘制所述树状结构的各节点的色块；
所述根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染，具体包括：
根据各节点的色块的大小确定各节点的文字信息的字号大小；
根据各节点的文字信息的字号大小，以及各节点的色块的位置坐标，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。
2.根据权利要求1所述的方法，其特征在于，在所述使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染之后，还包括：
在所述树状结构的各父节点的色块处绘制折叠标志；以及所述方法还包括：
在接收到一个节点的色块处的折叠标志的点击指令后，将所述树状结构中该节点下的结构去除，形成新的树状结构；
利用Canvas绘制所述新的树状结构的各节点的色块和线条，并使用树状结构插件将所述新的树状结构的各节点的文字信息在对应色块处进行数据渲染。
3.根据权利要求2所述的方法，其特征在于，在所述利用Canvas绘制所述新的树状结构的各节点的色块和线条时，还包括：
在所述折叠标志的点击指令所涉及的节点的色块处显示绘制展开标志；以及所述方法还包括：
在接收到一个节点的色块处的展开标志的点击指令后，将该节点下的结构添加进来，形成更新后的树状结构；
利用Canvas绘制所述更新后的树状结构的各节点的色块和线条，并使用树状结构插件将所述更新后的树状结构的各节点的文字信息在对应色块处进行数据渲染。
4.根据权利要求1所述的方法，其特征在于，还包括：
在接收到放大/缩小指令后，根据放大/缩小比例计算出当前的显示比例；
根据当前位于显示屏中心位置处的节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；
利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
5.根据权利要求1所述的方法，其特征在于，还包括：
在接收到拖拽指令后，判断出拖在位于显示屏中心位置处的待显示的节点；
根据判断出的中心节点，以及当前的显示比例，确定所述树状结构中待显示的部分结构；
利用Canvas绘制所述部分结构的各节点的色块和线条，并使用树状结构插件将所述部分结构的各节点的文字信息在对应色块处进行数据渲染。
6.根据权利要求1所述的方法，其特征在于，还包括：
在接收到一个节点的点击指令后，显示该节点的详细信息。
7.一种移动终端，包括中央处理单元、信号处理和存储单元，以及存储在信号处理和存储单元上并可在中央处理单元上运行的程序，其特征在于，所述中央处理单元执行所述程序时实现如权利要求1-6任一所述的方法。
CN202011265217.7A 2020-11-12 2020-11-12 一种树状结构图的绘制方法以及移动终端 Active CN112395827B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011265217.7A CN112395827B (zh) 2020-11-12 2020-11-12 一种树状结构图的绘制方法以及移动终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011265217.7A CN112395827B (zh) 2020-11-12 2020-11-12 一种树状结构图的绘制方法以及移动终端

Publications (2)

Publication Number Publication Date
CN112395827A CN112395827A (zh) 2021-02-23
CN112395827B true CN112395827B (zh) 2024-06-25

Family

ID=74599406

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011265217.7A Active CN112395827B (zh) 2020-11-12 2020-11-12 一种树状结构图的绘制方法以及移动终端

Country Status (1)

Country Link
CN (1) CN112395827B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115268917B (zh) * 2022-09-30 2022-12-23 北京国电通网络技术有限公司 节点结构图构建方法、装置、设备和介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111104111A (zh) * 2019-11-29 2020-05-05 苏宁云计算有限公司 一种树状Canvas画布的布局处理方法及装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106126140B (zh) * 2016-06-16 2019-07-23 珠海豹趣科技有限公司 一种渲染文字的方法、装置及电子设备
CN110489618A (zh) * 2019-09-12 2019-11-22 北京启迪区块链科技发展有限公司 树形图渲染方法、装置、设备和介质

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111104111A (zh) * 2019-11-29 2020-05-05 苏宁云计算有限公司 一种树状Canvas画布的布局处理方法及装置

Also Published As

Publication number Publication date
CN112395827A (zh) 2021-02-23

Similar Documents

Publication Publication Date Title
CN110163786B (zh) 一种去除水印的方法、装置及设备
CN105989130A (zh) 电子地图展示方法、装置及电子设备
US10504258B2 (en) Information processing device editing map acquired from server
CN105444754A (zh) 导航图像显示方法及装置
CN109324796B (zh) 界面布局方法及装置
CN107526592A (zh) 一种页面适配方法和装置
CN104834637A (zh) 网页图片展示方法及装置
CN112395827B (zh) 一种树状结构图的绘制方法以及移动终端
CN111443974A (zh) Android设备屏幕适配方法、相关设备及可读存储介质
CN104268472A (zh) 还原被第三方动态库修改函数地址的方法和装置
CN115129278A (zh) 图像显示控制方法、系统、可读存储介质及电子设备
JP5230281B2 (ja) 地図階層通知方法、地図階層通知プログラム、及び地図階層通知システム
CN115797182B (zh) 一种特征图插值方法、装置、设备和存储介质
CN111881230A (zh) 一种地图区域的渲染方法、装置及电子设备
CN105096355A (zh) 图像处理方法和系统
CN115022460B (zh) 折叠屏终端应用程序处理的方法、装置、设备及存储介质
JP2007079866A (ja) 画像分類装置、画像分類方法、画像分類プログラム、及び撮像装置
CN115509652A (zh) 电子地图的图标显示方法、装置、介质及产品
CN110750742B (zh) 页面优化方法、系统、介质和电子设备
CN112464618A (zh) 文档数据的分页方法和装置、存储介质和电子设备
CN114442973A (zh) 屏幕显示方法、装置、计算机设备和存储介质
JP2004062602A (ja) 画像表示装置及び方法
WO2020250313A1 (ja) 多角形検索方法
CN110019584B (zh) 地图数据生成方法、地图显示方法、服务器及终端
CN106294329B (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