CN113012266B - 一种基于笔交互的图元拓扑构图方法 - Google Patents

一种基于笔交互的图元拓扑构图方法 Download PDF

Info

Publication number
CN113012266B
CN113012266B CN202110219119.8A CN202110219119A CN113012266B CN 113012266 B CN113012266 B CN 113012266B CN 202110219119 A CN202110219119 A CN 202110219119A CN 113012266 B CN113012266 B CN 113012266B
Authority
CN
China
Prior art keywords
primitive
sketch
editing
pen
line segments
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
CN202110219119.8A
Other languages
English (en)
Other versions
CN113012266A (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.)
Institute of Software of CAS
Hitevision Co Ltd
Original Assignee
Institute of Software of CAS
Hitevision 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 Institute of Software of CAS, Hitevision Co Ltd filed Critical Institute of Software of CAS
Priority to CN202110219119.8A priority Critical patent/CN113012266B/zh
Publication of CN113012266A publication Critical patent/CN113012266A/zh
Application granted granted Critical
Publication of CN113012266B publication Critical patent/CN113012266B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/80—Creating or modifying a manually drawn or painted image using a manual input device, e.g. mouse, light pen, direction keys on keyboard
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/08—Learning methods

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • General Health & Medical Sciences (AREA)
  • Biomedical Technology (AREA)
  • Data Mining & Analysis (AREA)
  • Evolutionary Computation (AREA)
  • Biophysics (AREA)
  • Molecular Biology (AREA)
  • Computing Systems (AREA)
  • Computational Linguistics (AREA)
  • Artificial Intelligence (AREA)
  • Mathematical Physics (AREA)
  • Software Systems (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开一种基于笔交互的图元拓扑构图方法，涉及计算机交互领域，利用触控笔在触控屏上绘制草图；选中绘制的草图，调用基于YOLOv5神经网络的草图识别引擎进行识别，识别出规范图元信息和无关的书写信息，规范图元信息包括图元类别和位置信息；从草图的笔划数据中去除规范图元对应的草图笔划信息，将剩下的草图笔划识别为线段；根据识别出的图元类别、图元位置、线段，以及线段与图元的位置关系，判断图元连接关系，从而建立图结构表示；根据图结构表示、图元类别和线段，转化为规范化的拓扑结构图，并显示在触控屏的原绘制位置上；存储拓扑结构图，根据需要对规范图元、拓扑结构图进行编辑。

Description

一种基于笔交互的图元拓扑构图方法
技术领域
本发明涉及计算机交互领域，具体涉及一种基于笔交互的图元拓扑构图方法。
背景技术
在日常学习、工作和生活中经常会需要一些图表辅助制定方案(例如：流程图、军事行动过程图COA等)、进行设计(例如：UML类图、电路设计图)以及理解关系(例如：UML例图、系统架构图等)。目前这些图的主流制作方式为用户采用键盘、鼠标的方式选择图形元素放置到画布上构成树状、链状或者网状的拓扑图结构，例如在visio中绘制流程图、UML类图等采取的都是这种方式。
采用键盘鼠标的构图方式目前被认为存在以下几个缺点：(1)需要用户学习掌握软件，增加了非专业用户的认知负担；(2)输入形式、内容约束较多，限制了用户即时想法的表达和呈现；(3)此外，键盘鼠标的交互输入方式并不适用于移动场景以及大屏交互场景。而在图表绘制中引入笔交互和草图识别技术可以带来键鼠输入所不具备的优势：(1)笔交互具有短学习曲线和易操作的特性，更容易幼童或老年人掌握使用；(2)笔输入支持更广泛非语言表示形式，包括非正式标记、数字、符号、图形和图表；(3)草图的自由绘制形式拉近了思维空间与物理空间的距离，可以帮助短时记忆，方便即时思路呈现。这些优点使得笔交互非常适用于如教学授课的这类场景，以草图绘制的各种图形结构的表达物体关联关系。
手绘草图是人类一种自然而直接的思路外化和交流方式，它是可视化新概念、评估已有想法、孕育新想法等的媒介。在工程和架构领域，草图适合概念设计活动，让设计者关注于设计本身(创作和抽象)，而不受限于细节。随着笔计算设备的普及，草图系统将成为笔计算设备上的重要应用。但目前人们使用草图的情况一般是：先花费大量时间用纸笔来记录他们的早期想法，当想法足够成熟时，再把这些草图想法转换成由绘图、UML图、流程图、电路设计图等组成的正式的电子文档。这种使用方式存在着冗余性和低效性。
发明内容
本发明的目的是提出一种新的基于笔交互的图元拓扑构图方法，实现了从采用笔画输入到笔绘图元构建多种结构图和基于笔交互进行图结构再修改、再编辑的功能。
为实现上述目的，本发明采用以下技术方案：
一种基于笔交互的图元拓扑构图方法，包括以下步骤：
利用触控笔在触控屏上绘制草图；
选中绘制的草图，调用基于YOLOv5神经网络的草图识别引擎进行识别，识别出规范图元信息和无关的书写信息，规范图元信息包括图元类别和位置信息；
从草图的笔画数据中去除规范图元对应的草图笔画信息，将剩下的草图笔画识别为线段；
根据识别出的图元类别、图元位置、线段，以及线段与图元的位置关系，判断图元连接关系，从而建立图结构表示；
根据图结构表示、图元类别和线段，转化为规范化的拓扑结构图，并显示在触控屏的原绘制位置上；
存储拓扑结构图，根据需要对规范图元、拓扑结构图进行编辑。
进一步地，预先利用训练数据对基于YOLOv5神经网络的草图识别引擎进行识别训练，直到loss值达到预期。
进一步地，训练数据包括加标准的手绘图表图片。
进一步地，基于YOLOv5神经网络的草图识别引擎识别的图包括电路图、流程图及关系图。
进一步地，将用户后续补充绘制的笔画根据与已识别线段的距离进行判断，将距离小于一预设值的笔画识别为线段，并与已识别的线段合并，得到最终的线段。
进一步地，对规范图元进行编辑包括选中、移动、删除、属性编辑。
进一步地，对规范图元进行编辑中，所述选中为用笔轻击选中；删除为用笔长击删除；移动为用笔尖拖动实现位置移动；属性编辑为用笔选中图元后再次长击，弹出属性编辑框进行属性编辑。
进一步地，对规范图元进行编辑后进行拓扑结构图联动调整，该调整通过后台修改代码实现。
进一步地，对拓扑结构图进行编辑包括移动、复制。
进一步地，对拓扑结构图进行编辑中，所述移动为用笔画手势选中多个图元，再拖动实现；所述复制为用笔画手势选中多个图元，再长击实现。
利用本发明提出的方法，用户可以用数字笔绘制草图，并通过草图理解由手绘草图得到正规的、可再编辑电子文档。本发明结合笔交互的精准、自由度高的优点以及计算机高计算能力、可复用支持后续修改的优点。通过全程用笔的方式实现用户更高自由度的精准构图，来更好实现用户瞬时思维的组织、记录，并结合计算机图形存储再编辑的优点，采用草图识别技术对笔画进行规范化、结构化存储与呈现，实现最终构图并进行存储复用的功能，满足了用户在移动场景和大屏场景较精准、高效的瞬间思维的组织与有效的表达呈现，真正缩小了从用户构思到具体设计呈现的鸿沟。本发明拓宽了用户设计构思构图系统的应用场景，以全程笔交互的输入方式使得用户可以进行有效的瞬间思维的组织与有效的表达呈现，缩小了从用户构思到具体设计的鸿沟。
附图说明
图1是实施例中的基于笔交互的图元拓扑构图流程图。
图2是实施例中的调用神经网络识别图元流程图。
图3是实施例中的草图结构理解流程图。
图4是实施例中的基于笔交互的图元拓扑构图操作的构成图。
具体实施方式
为使本发明的技术方案能更明显易懂，特举实施例并结合附图详细说明如下。
本实施例公开一种基于笔交互的图元拓扑构图方法，使用笔进行操作，如图1-3所示，步骤如下：
1.用户绘制草图，如电路图草图；
2.用户选中绘制的草图图形，调用预先训练好的基于YOLOv5神经网络的草图识别引擎进行识别，识别出电路图图元的类别和图元位置信息；
3.对存储的数据结构中的草图笔画数据进行图元部分去除，余下的草图笔画即为电路图导线(即线段)的组成部分，之后因为考虑到用户在绘制过程中补笔等操作对导线笔画基于笔画位置距离信息进行合并，合并结果即为最终导线笔画；
4.根据识别出的图元类别、图元位置和导线笔画的位置关系建立如图3中的图结构表示，其中矩形表示识别出的电路图元，圆形表示后面经过合并的导线信息；
5.基于建立的图结构表示，用导线的二元组形式来表示图元之间的连接关系，根据识别出的结果，重建出电路草图对应的标准电路图，实现对图元结构的理解和重建，并显示在界面上；
6.完成整个图元拓补构图的制作与存储。
本发明方法的执行可分为三个部分：笔输入、图元结构化和笔交互，如图4所示。
笔输入：通过电子触控笔绘制图形笔画来完成多领域图元的输入，本部分采用深度神经网络草图识别引擎将图元笔画作为输入，草图识别引擎执行识别流程包含以下步骤：(1)将草图分为无关的书写内容和绘图图元；(2)基于YOLOv5的草图识别引擎对绘制笔画按基元(包括线段、基本电路符号、基本形状等等)进行归纳分组；(3)基于YOLOv5的草图识别引擎识别此图元形状输出图元识别结果。
图元结构化：对识别的图元进行结构化存储，图元模板已在系统内部构建，草图引擎识别完之后将画布上的草图笔画删除，并将结构化、规范化的图元显示在草图笔画所在位置，用户手动用笔连接多图元，最终实现将识别的图元构建成拓扑图，图元之间的连接结构，语义关系(即连接关系)也一并存储在数据结构中。
笔交互：本部分主要支持用户用笔对识别出的图元结构的编辑，本部分划分为两类编辑操作(1)对图元编辑；(2)对图结构编辑。首先是图元编辑，图元编辑主要涉及对识别出的结构化、规范化的单个图元编辑操作，这里编辑操作包括选中、移动、删除、属性编辑。此外，由于识别后图元构建的拓扑图之间存在关联，所以前面出现对图元的调整例如移动、删除等会造成图元拓补结构联动修改。此外还有对整个图元拓扑结构编辑，主要包含最终构图的移动、复制。
上面这些编辑操作要与之前的笔输入相区分，具体笔交互定义的图元操作原语如下：
1.图元选中采用笔轻击选中；
2.图元删除采用笔长击删除；
3.图元移动采用笔尖拖动实现位置移动；
4.图元属性编辑采用笔选中图元后再次长击，弹出属性编辑框进行属性编辑；
5.最终构图修改联动调整采用后台代码实现，比如，删除图元，图结构中相连图的连接线悬空，相连关系结构存储调整删除与其关联图元关系；
6.结构图移动采用笔画手势选中多个图元，然后拖动实现；
7.结构图复制采用笔画手势选中多个图元，然后长击实现；
本方法的特点包括：基于笔交互的多领域、多种类草图图元输入及图元识别(包含电路图、流程图、关系图等)；对识别的图元进行结构化、模型化存储；可视化显示已经识别并结构化存储的图元及构建拓扑图结构，可支持在结构化、可视化界面上对已识别的结构化图元进行修改及拓扑图进行编辑操作；可进行物理动态模拟，比如电路图可以进行物理动态模拟，实现对真实电路仿真。
以上实施例仅用以说明本发明的技术方案而非对其进行限制，本领域的普通技术人员可以对本发明的技术方案进行修改或者等同替换，本发明的保护范围以权利要求所述为准。

Claims (10)

1.一种基于笔交互的图元拓扑构图方法，其特征在于，包括以下步骤：
利用触控笔在触控屏上绘制草图；
选中绘制的草图，调用基于YOLOv5神经网络的草图识别引擎进行识别，识别出规范图元信息和无关的书写信息，规范图元信息包括图元类别和位置信息；
从草图的笔画数据中去除规范图元对应的草图笔画信息，将剩下的草图笔画识别为线段，并基于笔画位置距离信息进行合并，将合并结果作为最终的线段；
根据识别出的图元类别、图元位置、线段，以及线段与图元的位置关系，判断图元连接关系，从而建立图结构表示；
根据图结构表示、图元类别和线段，用线段的二元组形式来表示图元之间的连接关系，转化为规范化的拓扑结构图，并显示在触控屏的原绘制位置上；
存储拓扑结构图，根据需要对规范图元、拓扑结构图进行编辑。
2.如权利要求1所述的方法，其特征在于，预先利用训练数据对基于YOLOv5神经网络的草图识别引擎进行识别训练，直到loss值达到预期。
3.如权利要求2所述的方法，其特征在于，训练数据包括加标准的手绘图表图片。
4.如权利要求1所述的方法，其特征在于，基于YOLOv5神经网络的草图识别引擎识别的图包括电路图、流程图及关系图。
5.如权利要求1所述的方法，其特征在于，将用户后续补充绘制的笔画根据与已识别线段的距离进行判断，将距离小于一预设值的笔画识别为线段，并与已识别的线段合并，得到最终的线段。
6.如权利要求1所述的方法，其特征在于，对规范图元进行编辑包括选中、移动、删除、属性编辑。
7.如权利要求6所述的方法，其特征在于，对规范图元进行编辑中，所述选中为用笔轻击选中；删除为用笔长击删除；移动为用笔尖拖动实现位置移动；属性编辑为用笔选中图元后再次长击，弹出属性编辑框进行属性编辑。
8.如权利要求1所述的方法，其特征在于，对规范图元进行编辑后进行拓扑结构图联动调整，该调整通过后台修改代码实现。
9.如权利要求1所述的方法，其特征在于，对拓扑结构图进行编辑包括移动、复制。
10.如权利要求9所述的方法，其特征在于，对拓扑结构图进行编辑中，所述移动为用笔画手势选中多个图元，再拖动实现；所述复制为用笔画手势选中多个图元，再长击实现。
CN202110219119.8A 2021-02-26 2021-02-26 一种基于笔交互的图元拓扑构图方法 Active CN113012266B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110219119.8A CN113012266B (zh) 2021-02-26 2021-02-26 一种基于笔交互的图元拓扑构图方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110219119.8A CN113012266B (zh) 2021-02-26 2021-02-26 一种基于笔交互的图元拓扑构图方法

Publications (2)

Publication Number Publication Date
CN113012266A CN113012266A (zh) 2021-06-22
CN113012266B true CN113012266B (zh) 2022-07-26

Family

ID=76387201

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110219119.8A Active CN113012266B (zh) 2021-02-26 2021-02-26 一种基于笔交互的图元拓扑构图方法

Country Status (1)

Country Link
CN (1) CN113012266B (zh)

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9251407B2 (en) * 2008-09-04 2016-02-02 Northrop Grumman Systems Corporation Security system utilizing gesture recognition
CN104424473A (zh) * 2013-09-06 2015-03-18 北京三星通信技术研究有限公司 一种手绘草图识别和编辑的方法及装置

Also Published As

Publication number Publication date
CN113012266A (zh) 2021-06-22

Similar Documents

Publication Publication Date Title
Newman et al. DENIM: An informal web site design tool inspired by observations of practice
Landay et al. Interactive sketching for the early stages of user interface design
KR101890831B1 (ko) 전자책 서비스 제공방법 및 그를 위한 컴퓨터 프로그램
CN102135873A (zh) 一种创建用户界面的方法和装置
CN110347993A (zh) 一种板书管理方法及装置
Chen et al. SUMLOW: early design‐stage sketching of UML diagrams on an E‐whiteboard
Company et al. Computer-aided sketching as a tool to promote innovation in the new product development process
CN101539905B (zh) 一种嵌入式多格式电子文档标注方法
Saquib et al. Constructing embodied algebra by sketching
CN113012266B (zh) 一种基于笔交互的图元拓扑构图方法
Zhang et al. Cangjie's poetry: an interactive art experience of a semantic human-machine reality
Offenwanger et al. Timesplines: Sketch-based authoring of flexible and idiosyncratic timelines
CN117011875A (zh) 多媒体页面的生成方法、装置、设备、介质和程序产品
JP7049173B2 (ja) 手話ｃｇ翻訳編集装置及びプログラム
CN109478200B (zh) 利用外廓线字体的通过元字形生成字体的装置及方法
Li et al. AlgoSketch: Algorithm Sketching and Interactive Computation.
CN109582304A (zh) 一种基于人机交互系统的ui控件生成方法及装置
CN109887058A (zh) 跨平台绘图系统
Warner et al. Interactive Flexible Style Transfer for Vector Graphics
CN112435319A (zh) 一种基于计算机处理的二维动画生成系统
CN109117804B (zh) 一种基于Unity 3D的移动设备的文字临摹方法
Gross et al. Beyond the Low-hanging Fruit: Information Technology in Architectural Design, past, present, and future
Cook Beyond the Desktop
US12017145B2 (en) Method and system of automatic animation generation
Aksan et al. Generative Ink: Data-Driven Computational Models for Digital Ink

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