CN113838163A - 区域图形绘制插件、方法、装置、电子设备、系统及介质 - Google Patents

区域图形绘制插件、方法、装置、电子设备、系统及介质 Download PDF

Info

Publication number
CN113838163A
CN113838163A CN202010587816.4A CN202010587816A CN113838163A CN 113838163 A CN113838163 A CN 113838163A CN 202010587816 A CN202010587816 A CN 202010587816A CN 113838163 A CN113838163 A CN 113838163A
Authority
CN
China
Prior art keywords
area
endpoint
module
control
indicator
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.)
Pending
Application number
CN202010587816.4A
Other languages
English (en)
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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding 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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN202010587816.4A priority Critical patent/CN113838163A/zh
Publication of CN113838163A publication Critical patent/CN113838163A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本说明书实施例提供区域图形绘制插件、方法、装置、电子设备、系统及介质,其中一个插件包括:获取模块,用于获取在浏览器的绘制区域中的点击位置坐标,作为所要绘制的场馆区域图形的端点,其中,相邻两个端点之间形成线段;闭合模块,用于当所述端点中的起始端点和结束端点重合时形成闭合区域图形;设置模块,用于将位于所述线段中间的点设置为控制点;控制模块,用于接收对所述控制点的控制,以将所述线段转换成曲线。

Description

区域图形绘制插件、方法、装置、电子设备、系统及介质
技术领域
本说明书涉及浏览器绘图技术领域,更具体地,涉及一种场馆区域图形绘制插件、绘制区域图形的方法、装置、电子设备、系统及存储介质。
背景技术
在举办诸如演唱会、展销会、大型会议等活动时,需要对活动场馆进行布置。在对活动场馆进行布置时,可以由设计人员绘制场馆的各个区域的图形,从而得到场馆的整体图。这种方式需要专业人员的操作,处理链路较长,成本较高并且整体效率较低。
此外,某些场馆管理系统可以提供较简单的绘制工具来绘制直线或线段。这些绘制工具无法场馆的曲线图形。
因此,需要提供快速或者有效的场馆区域图形绘制方案。
发明内容
本说明书的实施例提供绘制场馆区域图形的新技术方案。
根据本说明书的第一方面,提供场馆区域图形绘制插件,包括:获取模块,用于获取在浏览器的绘制区域中的点击位置坐标,作为所要绘制的场馆区域图形的端点,其中,相邻两个端点之间形成线段;闭合模块,用于当所述端点中的起始端点和结束端点重合时形成闭合区域图形;设置模块,用于将位于所述线段中间的点设置为控制点;控制模块,用于接收对所述控制点的控制,以将所述线段转换成曲线。
根据本说明书的第二方面,提供绘制区域图形的方法,包括:接收在浏览器的绘制区域中的点击位置坐标,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段;当所述端点中的起始端点和结束端点重合时形成闭合区域图形;将位于所述线段中间的点设置为控制点;接收对所述控制点的控制,以将所述线段转换成曲线。
根据本说明书的第三方面,提供绘制区域图形的装置,包括:第一接收模块,接收在浏览器的绘制区域中的点击位置坐标,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段;闭合模块,当所述端点中的起始端点和结束端点重合时形成闭合区域图形;设置模块,将位于所述线段中间的点设置为控制点;第二接收模块,接收对所述控制点的控制,以将所述线段转换成曲线。
根据本说明书的第四方面,提供电子设备,包括处理器和存储器,存储器存储可执行指令,当运行电子设备时,可执行指令控制处理器执行根据实施例的方法。
根据本说明书的第五方面,提供绘制系统,包括:第一终端设备;服务器;以及第二终端设备,其中,所述第一终端设备通过所述服务器将绘制区域图形的任务发送给所述第二终端设备,所述第二终端设备利用实施例中所述的方法在浏览器环境下绘制区域图形并将所绘制的区域图形发送给所述服务器,以及所述服务器将所述区域图形返回给所述第一终端设备。
根据本说明书的第六方面,提供存储介质,该存储介质存储可执行指令,该可执行指令在被执行时实现根据实施例的方法。
在不同实施例中,通过首先绘制场馆整体区域图形并接着借助于控制点调整图形中的线段,提供了一种绘制场馆区域图形的简便方式。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本说明书实施例。
此外,本说明书实施例中的任一实施例并不需要达到上述的全部效果。
通过以下参照附图对本说明书的示例性实施例的详细描述,本说明书的实施例的其它特征及其优点将会变得清楚。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本说明书实施例中记载的一些实施例,对于本领域普通技术人员来讲,还可以根据这些附图获得其他的附图。
图1示出了示例性的网络系统。
图2示出了根据一个实施例的场馆区域图形绘制插件的示意性框图。
图3示出了根据一个实施例的绘制区域图形的方法的示意性流程图。
图4示出了根据一个实施例的绘制区域图形的装置的示意性框图。
图5示出了根据另一个实施例的绘制区域图形的装置的示意性框图。
图6示出了根据一个实施例的电子设备的示意性框图。
图7示出了根据一个实施例的绘制场馆区域图形的过程的示意图。
图8示出了根据一个实施例的绘制场馆区域图形的一个浏览器界面的示意图。
图9示出了根据一个实施例的在绘制场馆区域图形的过程中的各个示意图形。
图10示出了根据一个实施例的在绘制场馆区域图形的过程中撤销图形绘制时的各个示意图形。
图11示出了根据一个实施例的绘制场馆区域图形的又一个浏览器界面的示意图。
具体实施方式
以下对至少一个示例性实施例的描述实际上仅仅是说明性的,决不作为对本发明及其应用或使用的任何限制。
下面,参照附图描述本说明书的不同实施例和例子。
图1示出了示例性的网络系统。
图1所示的网络系统可以包括网络110、终端电子设备132、144、146。在网络110中布置服务器122、124等。终端电子设备132、144、146通过有线或无线方式连接到网络110。
例如,终端电子设备144或146的第一用户准备在活动场馆举办活动。第一用户可以使用终端电子设备144或146设计活动场馆的各个区域的区域图形,然后依据所设计的区域图形,布置场馆,例如,布置舞台、展位区、观众座位区等。
此外,第一用户也可以委托终端电子设备132的第二用户来设计活动场馆的各个区域的区域图形。第一用户可以使用终端电子设备144或146,通过服务器122、124,将设计活动场馆的任务发送给第二用户的终端电子设备132。该任务例如包括场馆的尺寸、活动的类型、期望包含的区域等。第二用户使用终端电子设备132,根据该任务,利用下面各个实施例中描述的绘制区域图形的方法设计活动场馆的各个区域的区域图形。第二用户在完成设计之后,使用终端电子设备132,将所设计的图形发送给服务器122、124。接着,服务器122、124可以将这些区域图形返回给终端电子设备144或146。这样,使用终端电子设备144或146的第一用户可以基于这些区域图形,布置场馆。
这里,提供了一种有效的方式,供管理人员布置场馆。相比于专业的绘图软件,这种基于浏览器的设计交互方式使得管理人员与设计人员的沟通更容易且迅捷,对于设计系统的要求更低,可以更快地实现设计。此外,这种基于浏览器的设计交互系统更容易被继承到各种应用软件中。
图2示出了根据一个实施例的场馆区域图形绘制插件的示意性框图。在这里,浏览器环境指的是能够实现网页浏览的环境,它可以是各种独立的浏览器应用,也可以是集成到某些应用程序中的能够实现浏览器功能的组件。
如图2所示,场馆区域图形绘制插件20包括:获取模块21、闭合模块22、设置模块23和控制模块24。
获取模块21用于获取在浏览器的绘制区域中的点击位置坐标,作为所要绘制的场馆区域图形的端点,其中,相邻两个端点之间形成线段。
可以将用户首先在绘制区域点击的点作为起始点。按照点击顺序,从起始点开始,每次用户点击时,当前点击的点与之前点击的点构成一条线段并且分别作为该线段的两个端点。
闭合模块22用于当所述端点中的起始端点和结束端点重合时形成闭合区域图形。
用户可以将当前屏幕上的指示标志放置在与起始端点重合的位置,从而起始端点和结束端点重合,以形成闭合区域图形。所述指示标志例如可以是鼠标的光标。此外,为了方便用户的操作,还可以通过吸附的方式来闭合区域图形,即,当指示标志靠近起始端点时,所述闭合模块22将指示标志自动吸附到起始端点。此时,用户可以执行点击操作。所述闭合模块22响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。这里,自动吸附也可以是自动完成的,而不需要用户的点击操作。例如,当指示标志靠近起始端点时,所述闭合模块22将指示标志自动吸附到起始端点并自动完成区域图形的闭合处理。
如图2所示,插件20还可以包括吸附设置模块25。吸附设置模块25设置吸附范围。例如,系统可以设置默认的吸附范围,例如,5个坐标单位。此外,还可以提供选项,供用户设置坐标范围,例如,9个坐标单位,并将所设置的坐标范围作为吸附范围。当指示标志位于起始端点的吸附范围内时,将指示标志自动吸附到起始端点。
设置模块23用于将位于所述线段中间的点设置为控制点。这里,线段中间可以表示两个端点之间的任意位置。
控制模块24用于接收对所述控制点的控制,以将所述线段转换成曲线。
这里的曲线可以是贝塞尔曲线。例如,控制点是线段的中点。在这种情况下,可以由线段的两个端点及其控制点形成二阶贝塞尔曲线。此外,为了形成更加复杂的形状,还可以增加控制点的数量,例如,在线段中间设置三个控制点,由此可以控制三阶贝塞尔曲线。
由于区域图形可能包括多条边,因此,可以存在多个控制点。当多个控制点脱离其所控制的曲线时,这些控制点可能令用户感觉混乱。为此,插件20可以包括表示模块26。表示模块26在控制点及其曲线之间形成虚线,以表示该控制器与曲线之间的控制关系。通过这种方式,可以使得用户设计区域图形时,图形的呈现更加清晰。
在设计场馆区域的应用情境下,需要快速且方便地产生设计结果。因此,使用浏览器中的插件来执行这种设计,可以方便设计人员的设计工作,满足这种应用情境下对于速度和方便性的要求。而且,在使用浏览器的情况下,当完成设计之后,可以很容易地将设计结果上传到服务器或者直接发送给场馆使用人员。
对于场馆设计而言,由于场馆的整体形状时固定的,因此,通过这种方式,可以快速地对场馆的内部区域进行规划,从而提高设计效率。此外,利用曲线模式,可以尽可能地产生更多的形状,满足场馆内部快速布置的需求。
通过这种插件工具的设计,使得用户在设计场馆时采用从整体到细节的绘制方式,即,首先,用户对场馆的各个区域进行设计、规划,然后,用户再对各个区域的细节进行调整。对于场馆设计的用户来说,这种方式可以提高用户的设计效率,使得用户的设计工作更加便捷。通过这种方式,可以使得用户能够更加直观地设计场馆区域以及平衡整体和细节之间的关系。
此外,用户可以在浏览器环境下直接使用这种插件工具,而不需要复杂的配置处理。因此,这可以为用户的使用提供方便,从而提升用户的使用体验。
通常,在举办活动时,场馆的设计人员并不是专业的图形设计人员。在这种情境下,通常需要快速地布置场馆。通过这种绘图方案,可以提供一种简单、符合需求的设计方式。普通的用户也可以快速地了解并利用这种方式,输出符合需求的区域布置结果。
此外,这里的“吸附”方式,可以进一步省去非专业用户的精确操作需求,减少对于用户的绘图专业技能的需求。
此外,插件20还可以包括可以撤销模块27,响应于对于单个指定按键的触发,撤销对于区域图形的上一个操作。例如,单个指定按键包括Backspace按键。在浏览器环境下,组合按键很容易与其它特定操作的快捷键产生冲突,并且操作复杂。这里,可以使用单个按键,可以简化用户操作并减少按键冲突。
这里的区域图形的格式可以是SVG格式、Canvas格式或WebGL格式。此外,随着技术的发展,区域图形的格式还可以是其他的等同图形格式,例如,其他等同的矢量图形格式。
图3示出了根据一个实施例的绘制区域图形的方法的示意性流程图。这里的区域图形可以是场馆中的区域的图形。
如图3所示,在步骤S202,接收在浏览器的绘制区域中的点击位置坐标,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段。
将用户首先在绘制区域点击的点作为起始点。按照点击顺序,从起始点开始,每次用户点击时,当前点击的点与之前点击的点构成一条线段并且分别作为该线段的两个端点。
在步骤S204,当端点中的起始端点和结束端点重合时形成闭合区域图形。
用户可以将当前指示标志放置在与起始端点重合的位置,从而起始端点和结束端点重合,以形成闭合区域图形。此外,为了方便用户的操作,还可以通过吸附的方式来闭合区域图形,即,当指示标志的坐标靠近起始端点时,将指示标志自动吸附到起始端点。此时,用户可以执行点击操作。响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。
还可以设置吸附范围,其中,所述吸附范围是可定制的坐标范围。例如,系统可以设置默认的吸附范围,例如,5个坐标单位。此外,还可以提供选项,供用户设置坐标范围,例如,9个坐标单位,并将所设置的坐标范围作为吸附范围。当指示标志位于起始端点的吸附范围内时,将指示标志自动吸附到起始端点。
在步骤S206,将位于线段中间的点设置为控制点。这里,线段中间表示两个端点之间的任意位置。
在步骤S208,接收对控制点的控制,以将线段转换成曲线。
这里的曲线可以是贝塞尔曲线。例如,控制点是线段的中点。在这种情况下,可以由线段的两个端点及其控制点形成二阶贝塞尔曲线。此外,为了形成更加复杂的形状,还可以增加控制点的数量,例如,在线段中间设置三个控制点,由此可以控制三阶贝塞尔曲线。
由于区域图形可能包括多条边,因此,可以存在多个控制点。当多个控制点脱离其所控制的曲线时,这些控制点可能令用户感觉混乱。为此,可以在控制点及其曲线之间形成虚线,以表示该控制点与曲线之间的控制关系。通过这种方式,可以使得用户设计区域图形时,图形的呈现更加清晰。
在许多需要快速产生设计结果的情况下,例如在对场馆进行设计的情况,这种方式是特别有利的。例如,可以在浏览器中,通过HTML5语言等实现这种绘图应用。当然用户需要对场馆中的区域进行设计时,用户可以通过浏览器直接调用绘图应用,并在浏览器中设计区域图形。用户可以是场馆活动的主办人员,也可以协助主办人员的辅助人员。当用户完成设计时,用户可以直接通过浏览器保存设计或上传到网络中。通过这种方式,可以简化设计链路,使得从设计到输入的过程更加快速、简单。
此外,在这里,不是直接绘制每条曲线,而是先形成区域图形整体,再通过控制点来调整曲线。在场馆设计的应用场景中,由于场馆的整体形状时固定的,因此,通过这种方式,可以快速地对场馆的内部区域进行规划,从而提高设计效率。此外,利用曲线模式,可以尽可能地产生更多的形状,满足场馆内部快速布置的需求。
通常,在举办活动时,场馆的设计人员并不是专业的图形设计人员。在这种情境下,通常需要快速地布置场馆。通过这种绘图方案,可以提供一种简单、符合需求的设计方式。普通的用户也可以快速地了解并利用这种方式,输出符合需求的区域布置结果。
此外,这里的“吸附”方式,可以进一步省去非专业用户的精确操作需求,减少对于用户的绘图专业技能的需求。
此外,可以通过单个按键来执行撤销操作。可以响应于对于单个指定按键的触发,撤销对于区域图形的上一个操作。例如,单个指定按键包括Backspace按键。在浏览器环境下,组合按键很容易与其它特定操作的快捷键产生冲突,并且操作复杂。这里,可以使用单个按键,可以简化用户操作并减少按键冲突。
这里的区域图形的格式可以是SVG格式、Canvas格式或WebGL格式。此外,随着技术的发展,区域图形的格式还可以是其他的等同图形格式,例如,其他等同的矢量图形格式。
图4示出了根据一个实施例的绘制区域图形的装置的示意性框图。
如图4所示,绘制区域图形的装置300包括:第一接收模块302,接收在浏览器的绘制区域中的点击位置位置,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段;闭合模块304,当端点中的起始端点和结束端点重合时形成闭合区域图形;设置模块306,将位于线段中间的点设置为控制点;第二接收模块308,接收对控制点的控制,以将线段转换成曲线。
例如,所述闭合模块可以在指示标志靠近所述起始端点时,将指示标志自动吸附到所述起始端点,以及响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。
图5示出了根据一个实施例的绘制区域图形的装置的示意性框图。
如图5所示,装置300还可以包括吸附设置模块312。吸附设置模块312能够设置吸附范围,其中,所述吸附范围是可定制的坐标范围。当指示标志位于起始端点的吸附范围内时,闭合模块304将指示标志自动吸附到起始端点。
装置300还可以包括表示模块314。表示模块314可以在控制点及其曲线之间形成虚线,以表示该控制器与曲线之间的控制关系。
装置300还可以包括撤销模块316。撤销模块316可以响应于对于单个指定按键的触发,撤销对于区域图形的上一个处理。
图4和图5的装置300可以实现上面方法实施例中的方案,在这里省略重复的描述。
本说明书还提供一种电子设备。图6示出了电子设备400。
电子设备400例如是图1中所示的终端电子设备。用户可以使用电子设备400来绘制区域图形。
如图6所示,电子设备400包括处理器402、存储器404。电子设备400还可以包括显示屏410、用户接口412、摄像头414、音频/视频接口416、传感器418和通信部件420等。此外,电子设备400还可以还包括电源管理芯片406以及电池408等。电子设备400可以智能手机、平板电脑、笔记本电脑、台式机等。
处理器402可以是各种处理器。存储器404可以存储电子设备400运行所需的底层软件、系统软件、应用软件、数据等。存储器404可以包括多种形式的存储器,例如,ROM、RAM、Flash等。
显示屏410可以是液晶显示屏、OLED显示屏等。在一个例子中,显示屏410可以是触摸屏。用户可以通过显示屏210进行输入操作。此外,用户还可以通过触摸屏进行指纹识别等。
用户接口412可以包括USB接口、闪电接口、键盘等。
摄像头414可以是单摄像头,也可以是多摄像头。此外,摄像头414可以用于用户的面容识别。
音频/视频接口416例如可以包括扬声器接口、麦克风接口、诸如HDMI的视频传输接口等。
传感器418例如可以包括陀螺仪、加速度计、温度传感器、湿度传感器、压力传感器等等。例如,通过传感器可以确定电子设备周围的环境等。
通信部件420例如可以包括WiFi通信部件、蓝牙通信部件、3G、4G和5G通信部件等。通过通信部件420,电子设备400可以被布置中网络中。
电源管理芯片406可以用于管理输入电子设备400电源功率,还可以对电池408进行管理,以保证较大的利用效率。电池408例如是锂离子电池等。
图6所示的电子设备仅是解释性的,并且决不是为了要限制这里的实施例、其应用或用途。
电子设备400的存储器404可以存储可执行指令。当可执行指令被处理器402执行时实现上面图3所示的方法中的技术方案。
这里,还可以提供一种存储介质,该存储介质存储可执行指令,该可执行指令在被执行时实现上面图3所示的方法中的技术方案。
图7示出了根据一个实施例的绘制场馆区域图形的过程的示意图。图8示出了根据一个实施例的绘制场馆区域图形的浏览器界面的示意图。
用户可以利用图8所示的浏览器界面,按照图7所示的过程来绘制所需的场馆区域图形。这里的用户可以是场馆活动的主办方人员,也可以是协助主办方人员的辅助人员。
在图8所示的浏览器环境50中,用户可以通过界面左侧的“添加区域”选项51来添加新的区域。当用户点击“添加区域”选项51时,可以给用户提供多种图形选择52,例如,矩形、圆形、直线多边形。在图8中,在绘制区域中显示了用户所绘制的区域图形53-58。例如,在演唱会场馆的应用场景下,区域53是舞台,区域54、55是诸如音响等的设备区域,区域56-58分别是不同区域的座位区。另外,如图8所示,用户还可以按照这里的实施例中所提供的方案,绘制曲线多边形,例如,在舞台53周围增加围绕舞台的内场观众区域,等。
下面,参照图7,说明在浏览器环境下绘制场馆区域图形的过程。
如图7所示,进入浏览器的区域编辑模式。在502,用户可以通过图8的界面左侧的“添加区域”选项51来添加新的场馆区域,例如,如图8的52所示的曲线多边形。
首先,进入绘制模式I,开始绘制直线图形。在504,用户在绘制区域中,点击期望的点,以确定区域图形的起始端点。
在512,用户可以判断起始端点是否满足要求。如果不满足要求,在520,用户点击所设定的撤销键,例如,Backspace键,可以回到504,用户重新选择起始端点。如果满足要求,在514,用户可以在绘制区域点击某个点,该某个点与上一个点(起始端点或随后点击的端点)形成线段。
在516,用户可以判断是否需要形成闭合区域图形。如果用户希望继续执行绘制,则在524,用户可以判断是否需要重新编辑上一条线段。如果不需要重新编辑上一条线段,可以回到514,用户绘制其他的端点。如果需要重新编辑上一条线段,在530,用户点击所设定的撤销键。
在528,系统判断是否存在可用于位置调整的线段。如果存在可用于位置调整的线段,则在522,撤销上一个端点,接着,回到514,用户重新绘制端点。如果不存在可用于位置调整的线段,则在526,重新开始端点的绘制过程,并回到504,以重新绘制起始端点。
在518,用户希望闭合曲线,则用户将指示标志靠近起始端点。指示标志会自动吸附到起始端点,此时,用户点击鼠标,从而形成闭合区域图形,从而完成直线图形的绘制模式I。
接着,进入绘制模式II,以绘制曲线图形。在542,例如使用黑色实心圆点显示各个线段的端点及其控制点。例如,所述曲线是二阶贝塞尔曲线,控制点是各个线段的中点。在544,用户使用鼠标拖动所要调整的线段的控制点,以改变曲线形状。
在546,用户确定闭合图形的形状是否达到用户的要求。
如果没有达到用户的要求,在548,用户确定是否需要更改最近的一次编辑操作。如果不需要更改最近的一次编辑操作,则回到544,继续调整曲线形状。
如果需要更改最近的一次编辑操作,则在550,用户点击所设定的撤销键。在552,判断区域图形是否仍然是闭合图形。如果区域图形不是闭合图形,则在532,重新进入直线图形的绘制模式I。接着,回到514,用户重新绘制端点。如果区域图形仍然是闭合图形,则在554,回到上一次操作前的状态。接着,则回到544,用户继续调整曲线形状。
如果闭合图形已经达到用户的要求,则在562,用户点击绘制区域的空白处,完成区域图形的绘制。
图9示出了根据一个实施例的在绘制场馆区域图形的过程中的各个示意图形。
如图9中的A所示,用户在绘制区域点击起始端点P1,并点击第二个端点P2。在P1和P2之间形成线段。接着,如图9中的B、C所示,用户点击端点P3、P4,以形成线段P2P3和P3P4。如图9中的D所示,用户希望将图形闭合,并将鼠标光标靠近起始端点P1。如图9中的E所示,鼠标光标被自动吸附到起始端点P1,当用户再次点击鼠标时,形成闭合图形P1P2P3P4。接着,如图9中的F所示,以实心圆点标示各个端点P1、P2、P3、P4和控制点P5、P6、P7、P8。如图9中的G所示,用户拖动控制点P6,以调整曲线P2P6P3。如图9中的H所示,用户拖动控制点P8,以调整曲线P4P8P1。如图9中的H、G所示,在控制点P6、P8及其对应的曲线P2P6P3和P4P8P1之间形成虚线,以表示该控制器与曲线之间的控制关系。
图10示出了根据一个实施例的在绘制场馆区域图形的过程中撤销图形绘制时的各个示意图形。
图10中的a表示已经完成的曲线图形p1p2p3p4p5p6p7p8。如图10的b所示,当用户点击所设定的撤销键时,撤销上一次对曲线p2p6p3的操作。如图10的c所示,当用户再次点击撤销键时,撤销上一次对曲线p4p8p1的操作。如图10的d所示,当用户再次点击撤销键时,撤销形成闭合图形的操作,并撤销线段p4p1。如图10的e所示,当用户移动鼠标时,鼠标光标可以相应地移动并和上一个端点形成线段。如图10的f所示,当用户再次点击撤销键时,撤销线段p3p4。如图10的g所示,当用户再次点击撤销键时,撤销线段p2p2。此时,当用户再次点击撤销键时,则在绘制界面上仅剩起始端点p1。
图11示出了根据一个实施例的绘制场馆区域图形的浏览器界面的又一个应用场景。
图11所示的浏览器界面与图8所示的浏览器界面类似。同样地,可以利用图11所示的浏览器界面,按照图7所示的过程来绘制所需的场馆区域图形。在图11的浏览器界面中,包括浏览器环境50。在浏览器环境50包括“添加区域”选项51,并且在绘制区域中显示了用户所绘制的区域图形53-58。
图11与图8的不同之处在于,在图11中增加了场馆实景窗口61。场馆实景窗口61可以呈现所绘制的场馆的、增强现实的实景图像。当用户在图11的绘制区域绘制区域图形53-58时,在场馆实景窗口61中,可以在实景图像上叠加对应的虚拟设计图形。通过这种方式,用户可以在绘制场馆区域图形时,直观地查看场馆的预期布置情况,从而帮助用户设计更加符合期望的场馆区域。这可以提升用户的使用体验。
尽管在图11中,场馆实景窗口61以悬浮框的形式呈现给用户,但是,还可以通过其他方式呈现场馆实景窗口61。例如,可以将场馆实景窗口61固定设置在浏览器环境50的特定位置。
本方案,同时还可以用于对已布置好的场馆,进行座位图的绘制,所绘制的座位图可供用户进行在线选座等。
在这里,计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被电子设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到本说明书实施例可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本说明书实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本说明书实施例各个实施例或者实施例的某些部分所述的方法。
上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机,计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的,在实施本说明书实施例方案时可以把各模块的功能在同一个或多个软件和/或硬件中实现。也可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上所述仅是本说明书实施例的具体实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本说明书实施例原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本说明书实施例的保护范围。

Claims (13)

1.一种场馆区域图形绘制插件,包括:
获取模块,用于获取在浏览器的绘制区域中的点击位置坐标,作为所要绘制的场馆区域图形的端点,其中,相邻两个端点之间形成线段;
闭合模块,用于当所述端点中的起始端点和结束端点重合时形成闭合区域图形;
设置模块,用于将位于所述线段中间的点设置为控制点;
控制模块,用于接收对所述控制点的控制,以将所述线段转换成曲线。
2.根据权利要求1所述的插件,其中,所述闭合模块还执行如下处理:
当屏幕上的指示标志的坐标靠近所述起始端点时,将所述指示标志自动吸附到所述起始端点;以及
响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。
3.根据权利要求2所述的插件,还包括:
吸附设置模块,用于设置吸附范围,其中,所述吸附范围是可定制的坐标范围,
其中,当所述指示标志的坐标位于所述起始端点的吸附范围内时,所述闭合模块将所述指示标志自动吸附到所述起始端点。
4.根据权利要求1所述的插件,还包括:
表示模块,在控制点及其曲线之间形成虚线,以表示该控制器与曲线之间的控制关系。
5.根据权利要求1所述的插件,还包括:
撤销模块,响应于对于单个指定按键的触发,撤销对于区域图形的上一个操作。
6.一种绘制区域图形的方法,包括:
接收在浏览器的绘制区域中的点击位置坐标,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段;
当所述端点中的起始端点和结束端点重合时形成闭合区域图形;
将位于所述线段中间的点设置为控制点;
接收对所述控制点的控制,以将所述线段转换成曲线。
7.根据权利要求6所述的方法,其中,当所述端点中的起始端点和结束端点重合时形成闭合区域图形包括:
当屏幕上的指示标志的坐标靠近所述起始端点时,将所述指示标志自动吸附到所述起始端点;以及
响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。
8.根据权利要求7所述的方法,还包括:
设置吸附范围,其中,所述吸附范围是可定制的坐标范围,
其中,当屏幕上的指示标志的坐标靠近所述起始端点时,将所述指示标志自动吸附到所述起始端点包括:当所述指示标志的坐标位于所述起始端点的吸附范围内时,将所述指示标志自动吸附到所述起始端点。
9.一种绘制区域图形的装置,包括:
第一接收模块,接收在浏览器的绘制区域中的点击位置坐标,作为所要绘制的区域图形的端点,其中,相邻两个端点之间形成线段;
闭合模块,当所述端点中的起始端点和结束端点重合时形成闭合区域图形;
设置模块,将位于所述线段中间的点设置为控制点;
第二接收模块,接收对所述控制点的控制,以将所述线段转换成曲线。
10.根据权利要求9所述的装置,其中,所述闭合模块执行如下处理:
当屏幕上的指示标志靠近所述起始端点时,将所述指示标志自动吸附到所述起始端点;以及
响应于点击处理,将所吸附到端点作为结束端点,从而形成闭合区域图形。
11.一种电子设备,包括处理器和存储器,存储器存储可执行指令,当运行电子设备时,可执行指令控制处理器执行根据权利要求6-8中任何一项所述的方法。
12.一种绘制系统,包括:
第一终端设备;
服务器;以及
第二终端设备,
其中,所述第一终端设备通过所述服务器将绘制区域图形的任务发送给所述第二终端设备,所述第二终端设备利用根据权利要求6所述的方法在浏览器环境下绘制区域图形并将所绘制的区域图形发送给所述服务器,以及所述服务器将所述区域图形返回给所述第一终端设备。
13.一种存储介质,该存储介质存储可执行指令,该可执行指令在被执行时实现根据权利要求6-8中任何一项所述的方法。
CN202010587816.4A 2020-06-24 2020-06-24 区域图形绘制插件、方法、装置、电子设备、系统及介质 Pending CN113838163A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010587816.4A CN113838163A (zh) 2020-06-24 2020-06-24 区域图形绘制插件、方法、装置、电子设备、系统及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010587816.4A CN113838163A (zh) 2020-06-24 2020-06-24 区域图形绘制插件、方法、装置、电子设备、系统及介质

Publications (1)

Publication Number Publication Date
CN113838163A true CN113838163A (zh) 2021-12-24

Family

ID=78964503

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010587816.4A Pending CN113838163A (zh) 2020-06-24 2020-06-24 区域图形绘制插件、方法、装置、电子设备、系统及介质

Country Status (1)

Country Link
CN (1) CN113838163A (zh)

Similar Documents

Publication Publication Date Title
US10657716B2 (en) Collaborative augmented reality system
US11715268B2 (en) Video clip object tracking
US11275481B2 (en) Collaborative augmented reality system
US10008015B2 (en) Generating scenes and tours in a spreadsheet application
US10649638B2 (en) Immersive media content navigation and editing techniques
KR102669113B1 (ko) Diy 효과 이미지 수정
EP4002107A1 (en) Data binding method, apparatus, and device of mini program, and storage medium
CN111583379B (zh) 虚拟模型的渲染方法、装置、存储介质与电子设备
US11526322B2 (en) Enhanced techniques for merging content from separate computing devices
WO2023226371A1 (zh) 目标对象交互式重现的控制方法、装置、设备及存储介质
US20210097741A1 (en) Annotating an image with a texture fill
US9524573B2 (en) Systems, methods, and computer-readable media for manipulating and mapping tiles of graphical object data
KR20180111242A (ko) 채색 가능한 콘텐트를 제공하는 전자 장치 및 그 방법
CN114518822A (zh) 应用图标管理方法、装置和电子设备
CN110286971A (zh) 处理方法及系统、介质和计算设备
CN113838163A (zh) 区域图形绘制插件、方法、装置、电子设备、系统及介质
US10649640B2 (en) Personalizing perceivability settings of graphical user interfaces of computers
CN115049804B (zh) 虚拟场景的编辑方法、装置、设备及介质
US20230343038A1 (en) Method and system for creating augmented reality filters on mobile devices
JP2019057209A (ja) プログラム、情報処理方法、及び情報処理装置
US20230401798A1 (en) Accessible mixed reality applications
WO2022161199A1 (zh) 图像编辑方法及设备
CN117649460A (zh) 蒙版操作方法及其设备、存储介质、终端
CN113902820A (zh) 一种绘制座位的方法及其装置
CN117131296A (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