基于web页面绘图的画布缩放方法及装置制造方法及图纸

本发明专利技术涉及物联网技术领域，提出了基于web页面绘图的画布缩放方法及装置，包括：监听当前画布位置、当前鼠标位置和画布的当前缩放比例；所述当前画布位置为画布在web页面上的当前相对位置；所述当前鼠标位置为鼠标触发点在画布上的当前相对位置；在接收到缩放指令时，禁用web页面原始缩放，并执行缩放操作；所述缩放指令包括缩放比例变化量。通过上述技术方案，解决了现有技术中基于web页面绘图的画布缩放操作不便的问题。布缩放操作不便的问题。布缩放操作不便的问题。

【技术实现步骤摘要】
基于web页面绘图的画布缩放方法及装置


[0001]本专利技术涉及物联网
，具体的，涉及基于web页面绘图的画布缩放方法及装置。

技术介绍

[0002]目前，在线绘图软件在缩放画布时，往往缩放的中心点是画布的左上角或画布中心点，缩放之后鼠标在画布中的位置会发生变化，导致需要编辑的组件被遮挡，需要重新移动鼠标位置才能继续进行编辑，操作不便，用户体验感不好。

技术实现思路

[0003]本专利技术提出基于web页面绘图的画布缩放方法及装置，解决了相关技术中基于web页面绘图的画布缩放操作不便的问题。
[0004]本专利技术的技术方案如下：
[0005]第一方面，基于web页面绘图的画布缩放方法包括：
[0006]监听当前画布位置、当前鼠标位置和画布的当前缩放比例；所述当前画布位置为画布在web页面上的当前相对位置；所述当前鼠标位置为鼠标触发点在画布上的当前相对位置；
[0007]在接收到缩放指令时，禁用web页面原始缩放，并执行缩放操作；所述缩放指令包括缩放比例变化量；
[0008]所述缩放操作具体包括：
[0009]根据所述画布的当前缩放比例和所述缩放比例变化量，计算所述画布的新缩放比例；
[0010]根据当前鼠标位置和所述的新缩放比例，计算得到新的鼠标位置，所述新的鼠标位置为鼠标触发点在所述画布上的新相对位置；其中，所述当前鼠标位置与新的鼠标位置对应web页面上的同一位置；所述新的鼠标位置与所述新缩放比例之间的比值，等于所述当前鼠标位置与所述当前缩放比例之间的比值；
[0011]根据所述当前画布位置、所述新缩放比例和所述新的鼠标位置，计算新的画布位置，所述新的画布位置为所述画布在web页面上的新相对位置；
[0012]将所述画布移动到所述新的画布位置，并根据所述新缩放比例对所述画布大小进行放大或缩小。
[0013]第二方面，基于web页面绘图的画布缩放装置包括：
[0014]第一监听单元，用于监听当前画布位置、当前鼠标位置和画布的当前缩放比例；所述当前画布位置为画布在web页面上的当前相对位置；所述当前鼠标位置为鼠标触发点在画布上的当前相对位置；
[0015]第一执行单元，用于在接收到缩放指令时，禁用web页面原始缩放，并执行缩放操作；所述缩放指令包括缩放比例变化量；
[0016]所述缩放操作具体包括：
[0017]根据所述画布的当前缩放比例和所述缩放比例变化量，计算所述画布的新缩放比例；
[0018]根据当前鼠标位置和所述的新缩放比例，计算得到新的鼠标位置，所述新的鼠标位置为鼠标触发点在所述画布上的新相对位置；其中，所述当前鼠标位置与新的鼠标位置对应web页面上的同一位置；所述新的鼠标位置与所述新缩放比例之间的比值，等于所述当前鼠标位置与所述当前缩放比例之间的比值；
[0019]根据所述当前画布位置、所述新缩放比例和所述新的鼠标位置，计算新的画布位置，所述新的画布位置为所述画布在web页面上的新相对位置；
[0020]将所述画布移动到所述新的画布位置，并根据所述新缩放比例对所述画布大小进行放大或缩小。
[0021]第三方面，一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现所述画布缩放方法的步骤。
[0022]本专利技术的工作原理及有益效果为：
[0023]本专利技术改变了web页面绘图的常规操作，限定了鼠标触发点在画布上的相对位置与画布大小同比例变化：在接收到缩放指令时，计算画布新缩放比例，以及，画布缩放后鼠标触发点在画布上新的相对位置，并且，新的鼠标位置与新缩放比例之间的比值，等于当前鼠标位置与当前缩放比例之间的比值。其中，当前鼠标位置与新的鼠标位置对应web页面上的同一位置，也即，鼠标触发点在web页面上的位置不变。
[0024]在此基础上，根据当前画布位置、新的鼠标位置和新缩放比例计算得到新的画布位置。由于鼠标触发点在web页面上的位置不变，因此不需要移动鼠标触发点，可移动画布到新的画布位置并按新缩放比例进行缩放，即实现了以鼠标触发点为中心进行缩放操作，同时，由于鼠标触发点在画布上的相对位置与画布大小同比例变化，因此，鼠标触发点附近的绘图组件不会因画布的放大或缩小而被遮挡，提高了绘图的便利性。
附图说明
[0025]下面结合附图和具体实施方式对本专利技术作进一步详细的说明。
[0026]图1为本专利技术画布缩放装置的一种通用计算机系统结构示意图；
[0027]图2为本专利技术方法流程图；
[0028]图3为本专利技术中画布位置和鼠标位置示意图；
[0029]图4为本专利技术画布缩放装置的又一实施例结构示意图。
具体实施方式
[0030]下面将结合本专利技术实施例，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都涉及本专利技术保护的范围。
[0031]本专利技术提供了基于web页面绘图的画布缩放方法及装置，以解决基于web页面绘图的画布缩放操作不便的问题。
[0032]上述画布缩放装置可以软件的形式应用于上述终端(诸如台式机、移动终端、ipad、平板电脑等)中，或以硬件(例如具体可为终端的控制器/处理器)的形式作为上述设备的组成部分。
[0033]当以软件形式存在时，上述画布缩放装置具体可为一应用程序，例如手机APP、终端应用程序等，也可作为某应用程序或操作系统的组件。
[0034]图1示出了上述画布缩放装置的一种通用计算机系统结构。
[0035]上述计算机系统可包括总线、处理器1、存储器2、通信接口3、输入设备4和输出设备5。处理器1、存储器2、通信接口3、输入设备4和输出设备5通过总线相互连接。其中：
[0036]总线可包括一通路，在计算机系统各个挂件之间传送信息。
[0037]处理器1可以是通用处理器，例如通用中央处理器(CPU)、网络处理器(Network Processor，简称NP)、微处理器等，也可以是特定应用集成电路(application
‑
specific integrated circuit，ASIC)，或一个或多个用于控制本专利技术方案程序执行的集成电路。还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
[0038]处理器1可包括主处理器(CPU)，还可包括显卡中的图形处理器(GPU)等。
[0039]存储器2中保存有执行本专利技术技术方案的程序，还可以保存有操作系统和其他关键业务。具体地，程序可以包括程序代码，程序代码包括计算机操作指令。更具体的，存储器2可以包括只读存储器(read
‑
only memory，ROM本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于web页面绘图的画布缩放方法，应用于一web页面绘图程序，其特征在于，包括：监听当前画布位置、当前鼠标位置和画布的当前缩放比例；所述当前画布位置为画布在web页面上的当前相对位置；所述当前鼠标位置为鼠标触发点在画布上的当前相对位置；在接收到缩放指令时，禁用web页面原始缩放，并执行缩放操作；所述缩放指令包括缩放比例变化量；所述缩放操作具体包括：根据所述画布的当前缩放比例和所述缩放比例变化量，计算所述画布的新缩放比例；根据当前鼠标位置和所述的新缩放比例，计算得到新的鼠标位置，所述新的鼠标位置为鼠标触发点在所述画布上的新相对位置；其中，所述当前鼠标位置与新的鼠标位置对应web页面上的同一位置；所述新的鼠标位置与所述新缩放比例之间的比值，等于所述当前鼠标位置与所述当前缩放比例之间的比值；根据所述当前画布位置、所述新缩放比例和所述新的鼠标位置，计算新的画布位置，所述新的画布位置为所述画布在web页面上的新相对位置；将所述画布移动到所述新的画布位置，并根据所述新缩放比例对所述画布大小进行放大或缩小。2.根据权利要求1所述的基于web页面绘图的画布缩放方法，其特征在于，所述当前画布位置与所述当前鼠标位置之和，等于所述新的画布位置与所述新的鼠标位置之和。3.根据权利要求1所述的基于web页面绘图的画布缩放方法，其特征在于，所述根据当前鼠标位置和所述新缩放比例，计算得到新的鼠标位置，具体包括：newMouseX＝(mouseX/scale)*(scale+value)newMouseY＝(mouseY/scale)*(scale+value)其中，(mouseX，mouseY)为当前鼠标位置，(newMouseX，newMouseY)为新的鼠标位置，mouseX、newMouseX为鼠标触发点到画布预设点的水平距离，mouseY、newMouseY为鼠标触发点到画布预设点的垂直距离；scale为当前缩放比例，value为缩放比例变化量，scale+value得到所述新缩放比例。4.根据权利要求1所述的基于web页面绘图的画布缩放方法，其特征在于，根据所述新缩放比例和所述新的鼠标位置，计算新的画布位置，具体包括：newoffsetX＝offsetX
–
(value/scale)*mouseXnewoffsetY＝offsetY
–
(value/scale)*mouseY其中，(offsetX，offsetY)为当前画布位置，(newoffsetX，newoffsetY)为新的画布位置，offsetX、newoffsetX为画布预设点到web页面预设点的水平距离，offsetY、newoffsetY为画布预设点到web页面预设点的垂直距离。5.根据权利要求1所述的基于web页面绘图的画布缩放方法，其特征在于，所述接收到缩放指令，具体包括：在监听到预设事件时，判断接收到所述缩放指令。6.根据权利要求5所述的基于web页面绘图的画布缩放方法，其特征在于，所述预设事件具体包括：同时发生的预设...

【专利技术属性】
技术研发人员：范旭蛟，
申请(专利权)人：河北蓝蜂信息科技有限公司，
类型：发明
国别省市：