CN112925593A - 一种目标图层缩放旋转的方法和装置 - Google Patents

一种目标图层缩放旋转的方法和装置 Download PDF

Info

Publication number
CN112925593A
CN112925593A CN201911233868.5A CN201911233868A CN112925593A CN 112925593 A CN112925593 A CN 112925593A CN 201911233868 A CN201911233868 A CN 201911233868A CN 112925593 A CN112925593 A CN 112925593A
Authority
CN
China
Prior art keywords
target layer
canvas
scaling
calculating
control
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
CN201911233868.5A
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.)
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Wodong Tianjun Information Technology 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 Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Wodong Tianjun Information Technology Co Ltd
Priority to CN201911233868.5A priority Critical patent/CN112925593A/zh
Publication of CN112925593A publication Critical patent/CN112925593A/zh
Pending legal-status Critical Current

Links

Images

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
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/56—Information retrieval; Database structures therefor; File system structures therefor of still image data having vectorial format
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/60—Rotation of whole images or parts thereof

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种目标图层缩放旋转的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；当控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据像素位置、画布基本参数和位移，计算控件在参考坐标系下的移动位置；根据初始位置和移动位置，分别计算目标图层产生的缩放数据和旋转数据，以使用缩放数据和旋转数据对目标图层进行渲染。该方法通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验。

Description

一种目标图层缩放旋转的方法和装置
技术领域
本发明涉及计算机领域，尤其涉及一种目标图层缩放旋转的方法和装置。
背景技术
Web图形库(Web Graphics Library，WebGL)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，使得Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。
现有技术中，对目标图层的缩放与旋转是通过不同的按钮分别实现的。具体地，使用缩放按钮和旋转按钮分别监听交互操作行为，缩放按钮通过位移数据与初始位置数据对比计算得到缩放比例，并应用于目标图层；旋转按钮通过位移数据与初始位置数据对比计算得到旋转角度，并应用于目标图层。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
当操作者需要同时进行缩放与旋转两种操作时，需要先后使用两个按钮分别进行交互处理，操作较为复杂，用户体验差。
发明内容
有鉴于此，本发明实施例提供一种目标图层缩放旋转的方法和装置，在目标图层的控件上设置位移监听事件，当位移监听事件触发后，将控件的初始位置与移动位置进行比对，得到缩放数据和旋转数据，并应用于目标图层，使得本实施例通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验。
为实现上述目的，根据本发明实施例的一个方面，提供了一种目标图层缩放旋转的方法。
本发明实施例的一种目标图层缩放旋转的方法，包括：根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置；根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。
可选地，计算所述目标图层产生的缩放数据，包括：在所述位移监听事件触发之前，计算所述控件到所述目标图层中心的第一距离；在所述位移监听事件触发之后，计算所述控件到所述目标图层中心的第二距离；以所述第二距离为被除数，所述第一距离为除数进行除法运算，得到所述目标图层产生的缩放数据。
可选地，计算所述目标图层产生的旋转数据，包括：将所述初始位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第一向量；将所述移动位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第二向量；计算所述第一向量和所述第二向量的夹角，得到所述目标图层产生的旋转数据。
可选地，计算所述第一向量和所述第二向量的夹角，包括：计算所述第一向量和所述第二向量的夹角弧度值；根据所述第一向量和所述第二向量，判断向量的旋转方向；根据所述旋转方向，修正所述夹角弧度值。
可选地，所述方法还包括：使用所述移动位置更新所述初始位置；使用所述缩放数据和所述旋转数据对所述目标图层进行渲染，包括：使用参数传递方法，将所述缩放数据和所述旋转数据传递到着色器，以使用所述着色器对所述目标图层进行渲染。
可选地，获取鼠标在画布的像素位置，包括：定义位置获取函数，其中，所述位置获取函数的参数为事件对象，所述事件对象用于获取鼠标相对于目标视窗的位置集合；为画布对象绑定鼠标移动事件，当所述鼠标移动事件触发，通过所述位置获取函数返回的事件对象，得到所述鼠标在画布的像素位置。
可选地，将所述方法应用于WebGL或者SVG中，以通过所述控件同时实现所述目标图层的缩放与旋转。
为实现上述目的，根据本发明实施例的另一方面，提供了一种目标图层缩放旋转的装置。
本发明实施例的一种目标图层缩放旋转的装置，包括：第一位置计算模块，用于根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；第二位置计算模块，用于当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置；渲染模块，用于根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。
可选地，所述渲染模块，还用于：在所述位移监听事件触发之前，计算所述控件到所述目标图层中心的第一距离；在所述位移监听事件触发之后，计算所述控件到所述目标图层中心的第二距离；以所述第二距离为被除数，所述第一距离为除数进行除法运算，得到所述目标图层产生的缩放数据。
可选地，所述渲染模块，还用于：将所述初始位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第一向量；将所述移动位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第二向量；计算所述第一向量和所述第二向量的夹角，得到所述目标图层产生的旋转数据。
可选地，所述渲染模块，还用于：计算所述第一向量和所述第二向量的夹角弧度值；根据所述第一向量和所述第二向量，判断向量的旋转方向；根据所述旋转方向，修正所述夹角弧度值。
可选地，所述装置还包括：更新模块，用于使用所述移动位置更新所述初始位置；所述渲染模块，还用于：使用参数传递方法，将所述缩放数据和所述旋转数据传递到着色器，以使用所述着色器对所述目标图层进行渲染。
可选地，所述第二位置计算模块，还用于：定义位置获取函数，其中，所述位置获取函数的参数为事件对象，所述事件对象用于获取鼠标相对于目标视窗的位置集合；为画布对象绑定鼠标移动事件，当所述鼠标移动事件触发，通过所述位置获取函数返回的事件对象，得到所述鼠标在画布的像素位置。
可选地，将所述装置应用于WebGL或者SVG中，以通过所述控件同时实现所述目标图层的缩放与旋转。
为实现上述目的，根据本发明实施例的再一方面，提供了一种电子设备。
本发明实施例的一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例的一种目标图层缩放旋转的方法。
为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质。
本发明实施例的一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例的一种目标图层缩放旋转的方法。
上述发明中的一个实施例具有如下优点或有益效果：在目标图层的控件上设置位移监听事件，当位移监听事件触发后，将控件的初始位置与移动位置进行比对，得到缩放数据和旋转数据，并应用于目标图层，使得本申请通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验；通过控件移动前后与目标图层中心的距离，计算距离比值得到缩放数据，计算过程简便，处理效率高；基于初始位置、移动位置和目标图层中心的位置构建第一向量和第二向量，计算向量夹角得到旋转数据，计算过程简便，处理效率高。
上述发明中的一个实施例具有如下优点或有益效果：使用旋转方向修正夹角弧度值，保证旋转数据的准确性；使用着色器渲染目标图层，以将缩放数据和旋转数据应用到目标图层，不受显卡的固定渲染管线限制；通过定义位置获取函数，并为画布对象绑定鼠标移动事件的方式，实现了鼠标在画布的像素位置的获取，进而得到控件的移动位置；在WebGL或者SVG中，通过一个控件同时实现目标图层的缩放与旋转，改进了WebGL和SVG本身的功能，降低了用户操作复杂程度，提升了用户体验。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明一实施例的目标图层缩放旋转的方法的主要步骤的示意图；
图2是根据本发明又一实施例的目标图层缩放旋转的方法的主要流程示意图；
图3是根据本发明又一实施例的目标图层缩放旋转的方法中目标图层缩放旋转前后的位置示意图；
图4是根据本发明再一实施例的目标图层缩放旋转的方法的主要流程示意图；
图5是根据本发明再一实施例的目标图层缩放旋转的方法中目标图层缩放旋转前后的位置示意图；
图6是根据本发明实施例的目标图层缩放旋转的装置的主要模块的示意图；
图7是本发明实施例可以应用于其中的示例性系统架构图；
图8是适用于来实现本发明实施例的电子设备的计算机装置的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
下面对本发明实施例涉及到的技术术语进行解释。
JavaScript：是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
OpenGL ES：全称为OpenGL for Embedded Systems，是OpenGL三维图形应用程序接口的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。OpenGL是个专业的图形程序接口。
HTML5 Canvas：通过JavaScript在网页上绘制2D图形。
图1是根据本发明一实施例的目标图层缩放旋转的方法的主要步骤的示意图。如图1所示，本发明实施例的目标图层缩放旋转的方法，主要包括如下步骤：
步骤S101：根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置。画布基本参数包括画布的宽度和高度，目标图层基本参数包括目标图层的宽度和高度。控制设置在目标图层上，可以位于目标图层四个角中的任意一个角。该控件可以是按钮、文本框等。
控件在参考坐标系下的位置包括横坐标和纵坐标，初始位置对应原始横坐标和原始纵坐标。由画布的宽度和高度、目标图层的宽度和高度以及目标图层中心相对画布中心的位移，就可以计算出控件在参考坐标系下的原始横坐标和原始纵坐标。目标图层默认加载于画布中心，此时的位移为0。
步骤S102：当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置。预先为控件绑定位移监听事件，该位移监听事件监听控件是否被点击，并且相对初始位置产生了位移。
如果监听到控件被点击，并且相对初始位置产生了位移，则获取鼠标在画布的像素位置。之后由鼠标在画布的像素位置、画布的宽度和高度以及目标图层中心相对画布中心的位移，就可以计算出控件被移动后，其在参考坐标系下的位置。
步骤S103：根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。分别计算位移监听事件触发前后，控件到所述目标图层中心的距离，得到的两个距离的比值即缩放数据。将参考坐标系的原点和控件的初始位置、移动位置分别连接，以构建两个向量，两个向量之间的夹角即旋转数据。
之后将缩放数据和旋转数据通过参数传递方式，传递到着色器，使用着色器对目标图层进行渲染，以将变化应用到目标图层，从而在WebGL或者SVG(Scalable VectorGraphics，可缩放矢量图形)中，实现通过一个控件同时进行缩放与旋转两种操作的目的。
图2是根据本发明又一实施例的目标图层缩放旋转的方法的主要流程示意图。如图2所示，本发明实施例的目标图层缩放旋转的方法，主要包括如下步骤：
步骤S201：根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的按钮在参考坐标系下的初始位置。假设在参考坐标系统，画布中心点的坐标为(0，0)，画布的宽度为width像素，画布的高度为height像素，目标图层的宽度为w1像素，目标图层的高度为h1像素，目标图层中心点沿x轴方向移动了translateX，沿y轴方向移动了translateY，按钮始终位于目标图层的右下角。则目标图层中心点的坐标为(translateX，translateY)，按钮在参考坐标系下的初始位置(x0，y0)可用下式表示：
Figure BDA0002304341050000071
步骤S202：为按钮绑定位移监听事件，为画布对象绑定鼠标移动事件。通过JavaScript为按钮绑定位移监听事件，该位移监听事件监听控件是否被点击，并且相对初始位置产生了位移。鼠标移动事件用于监听鼠标是否发生移动。
步骤S203：当位移监听事件触发后，获取鼠标在画布的像素位置。定义位置获取函数，该函数的参数为事件触发时的事件(Event)对象，该Event对象用于获取鼠标相对于目标视窗的位置集合，包括鼠标位置的x、y坐标。位置获取函数可以用下述代码实现：
Figure BDA0002304341050000081
设canvas为画布对象，为其绑定鼠标移动事件，当鼠标在画布上移动，绑定在画布上的mousemove事件触发，通过位置获取函数中返回的Event对象获取鼠标位置。实现代码可以如下：
Figure BDA0002304341050000082
步骤S204：根据像素位置、画布基本参数和位移，计算按钮在参考坐标系下的移动位置。假设目标图层沿x轴移动了transX，沿y轴移动了transY，则按钮在参考坐标系下的移动位置(x1，y1)可用下式表示：
Figure BDA0002304341050000083
式中，mouseX为鼠标在画布上x轴的像素位置，mouseY为鼠标在画布上y轴的像素位置。
步骤S205：根据初始位置和移动位置，分别计算目标图层所产生的缩放数据和旋转数据。根据按钮的初始位置(x0，y0)和移动位置(x1，y1)，分别计算目标图层所产生的缩放数据和旋转数据。下面进行详细数目。
首先，根据两点间距离公式，在位移监听事件触发之前，计算控件到目标图层中心的第一距离l1；在位移监听事件触发之后，计算控件到目标图层中心的第二距离l2。计算公式如下：
l1＝Math.sqrt(Math.pow((x0-translateX),2)+Math.pow((y0-translateY),2))
公式3
l2＝Math.sqrt(Math.pow((x1-translateX),2)+Math.pow((y1-translateY),2))
公式4
则目标图层等比缩放的比例ratio为：
ratio＝l2/l1
公式5
之后，使用目标图层中心点的坐标、按钮的初始位置构建第一向量v0，使用目标图层中心点的坐标、按钮的移动位置构建第二向量v1，则v0＝[x0-translateX，y0-translateY]，v1＝[x1-translateX，y1-translateY]。计算这两个向量之间的夹角即可得到旋转数据。
实施例中，夹角用弧度表示。则两个向量的夹角弧度值为：
rad＝Math.acos((v0[0]*v1[0]+v0[1]*v1[1])/(Math.sqrt((Math.pow(v0[0],2)+Math.pow(v0[1],2))*(Math.pow(v1[0],2)+Math.pow(v1[1],2)))))
公式6
根据第一向量v0和第二向量v1，判断旋转方向，以修正夹角弧度值：
If(v0[0]*v1[1]–v0[1]*v1[0]<0){
rad*＝-1；
}
经过上述计算过程，最终的等比缩放数据scale为：
scale＝[ratio，ratio，1]
公式7
沿z轴的旋转数据rotate为：
rotate＝[0，0，rad]
公式8
步骤S206：将缩放数据和旋转数据更新到着色器，对目标图层进行渲染。实施例中，可以传递参数方法将缩放数据和旋转数据传递到着色器。着色器内部得到该数据后，依靠GPU运算能力进行相关矩阵计算，并使用计算结果对目标图层进行渲染，完成目标图层的位置更新。本实施例通过对一个按钮同时控制目标图层的缩放与旋转，简化了用户界面与操作方式，提升了用户体验。
图3是根据本发明又一实施例的目标图层缩放旋转的方法中目标图层缩放旋转前后的位置示意图。如图3所示，画布中心点位于原点，坐标为(0，0)，横向为x轴，纵向为y轴。画布中心点与目标图层的中心点存在位移，且目标图层的中心点(图3中矩形框内的黑色点)沿x轴方向移动了translateX，沿y轴方向移动了translateY，中心点坐标为(translateX，translateY)。圆形代表按钮，矩形代表目标图层，按钮始终位于目标图层的右下角。当按钮从初始位置(x0，y0)移动到最终位置(x1，y1)时，目标图层由以虚线矩形框表示的原始状态转化成以实线矩形框表示的最终状态，其同时沿目标图层的中心点进行了缩放以及旋转θ角度。
上述实施例中，不管目标图层的中心点是否与画布中心点重合，均可实现缩放数据和旋转数据的计算。但是目标图层一般默认加载于画布中心，即目标图层的中心点与画布的中心点重合。此时，计算缩放数据和旋转数据时，可以省去部分参数。另外，上述实施例每次缩放旋转均需要计算按钮的初始位置，计算较为繁琐，因此可以在计算出移动数据后更新初始位置，以简化计算步骤，下面进行详细说明。
图4是根据本发明再一实施例的目标图层缩放旋转的方法的主要流程示意图。如图4所示，本发明实施例的目标图层缩放旋转的方法，用于WebGL中，主要包括如下步骤：
步骤S401：根据画布基本参数和目标图层基本参数，计算设置于目标图层上的按钮在参考坐标系下的初始位置。在WebGL中，画布中心点以及目标图层中心点的坐标均为(0，0)，画布的宽度为width像素，画布的高度为height像素，目标图层的宽度为w1像素，目标图层的高度为h1像素，按钮始终位于目标图层的右下角。因此，按钮在WebGL坐标系下的初始位置(x0，y0)可用下式表示：
Figure BDA0002304341050000111
步骤S402：为按钮绑定位移监听事件，为画布对象绑定鼠标移动事件。该步骤与步骤S202的实现过程相同，此处不再赘述。
步骤S403：当位移监听事件触发后，获取鼠标在画布的像素位置。该步骤与步骤S203的实现过程相同，此处不再赘述。
步骤S404：根据像素位置、画布基本参数和位移，计算按钮在参考坐标系下的移动位置。由于目标图层渲染到场景中，未产生任何位移，因此按钮在WebGL坐标系下的移动位置(x1，y1)可用下式表示：
Figure BDA0002304341050000112
步骤S405：根据初始位置和移动位置，分别计算目标图层所产生的缩放数据和旋转数据。按照步骤S205的计算方式，此时在位移监听事件触发之前，控件到目标图层中心的第一距离l1的计算公式如下：
l1＝Math.sqrt(Math.pow((x0-0),2)+Math.pow((y0-0),2))
公式11
在位移监听事件触发之后，控件到目标图层中心的第二距离l2的计算公式如下：
l2＝Math.sqrt(Math.pow((x1-0),2)+Math.pow((y1-0),2))
公式12
之后，仍旧使用目标图层中心点的坐标、按钮的初始位置构建第一向量v0，使用目标图层中心点的坐标、按钮的移动位置构建第二向量v1。则此时，第一向量v0＝[x0-0，y0-0]，第二向量v1＝[x1-0，y1-0]。
该步骤其他的计算方式与步骤S205相同，此处不再赘述。
步骤S406：将缩放数据和旋转数据更新到着色器，对目标图层进行渲染，使用移动位置更新初始位置。实施例中，通过WebGL的传递参数方法gl.uniform3fv()(gl为当前WebGL实例)，将缩放数据和旋转数据传递到WebGL着色器。
着色器内部得到该数据后，依靠GPU运算能力进行相关矩阵计算，并使用计算结果对目标图层进行渲染，以将变换应用到目标图层。同时，使用移动位置(x1，y1)更新按钮的初始位置(x0，y0)，即完成目标图层的位置更新，方便后续位移监听事件再次被触发后，可以直接使用更新后的数据，无需再次计算初始位置，达到使用一个按钮同时进行两种操作的目的。
图5是根据本发明再一实施例的目标图层缩放旋转的方法中目标图层缩放旋转前后的位置示意图。如图5所示，画布中心点与目标图层的中心点重合，均位于原点，坐标为(0，0)。横向为x轴，左侧边缘x轴坐标为-1，右侧边缘坐标为1；纵向为y轴，上部边缘y轴坐标为1，下部边缘y轴坐标为-1。
圆形代表按钮，矩形代表目标图层，按钮始终位于目标图层的右下角。当按钮从初始位置(x0，y0)移动到最终位置(x1，y1)时，目标图层由以虚线矩形框表示的原始状态转化成以实线矩形框表示的最终状态，其同时沿目标图层的中心点进行了缩放以及旋转θ角度。
通过本发明实施例的目标图层缩放旋转的方法可以看出，在目标图层的控件上设置位移监听事件，当位移监听事件触发后，将控件的初始位置与移动位置进行比对，得到缩放数据和旋转数据，并应用于目标图层，使得本申请通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验；通过控件移动前后与目标图层中心的距离，计算距离比值得到缩放数据，计算过程简便，处理效率高；基于初始位置、移动位置和目标图层中心的位置构建第一向量和第二向量，计算向量夹角得到旋转数据，计算过程简便，处理效率高。
通过本发明实施例的目标图层缩放旋转的方法可以看出，使用旋转方向修正夹角弧度值，保证旋转数据的准确性；使用着色器渲染目标图层，以将缩放数据和旋转数据应用到目标图层，不受显卡的固定渲染管线限制；通过定义位置获取函数，并为画布对象绑定鼠标移动事件的方式，实现了鼠标在画布的像素位置的获取，进而得到控件的移动位置；在WebGL或者SVG中，通过一个控件同时实现目标图层的缩放与旋转，改进了WebGL和SVG本身的功能，降低了用户操作复杂程度，提升了用户体验。
图6是根据本发明实施例的目标图层缩放旋转的装置的主要模块的示意图。如图6所示，本发明实施例的目标图层缩放旋转的装置600，主要包括：
第一位置计算模块601，用于根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置。画布基本参数包括画布的宽度和高度，目标图层基本参数包括目标图层的宽度和高度。控制设置在目标图层上，可以位于目标图层四个角中的任意一个角。该控件可以是按钮、文本框等。
控件在参考坐标系下的位置包括横坐标和纵坐标，初始位置对应原始横坐标和原始纵坐标。由画布的宽度和高度、目标图层的宽度和高度以及目标图层中心相对画布中心的位移，就可以计算出控件在参考坐标系下的原始横坐标和原始纵坐标。目标图层默认加载于画布中心，此时的位移为0。
第二位置计算模块602，用于当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置。预先为控件绑定位移监听事件，该位移监听事件监听控件是否被点击，并且相对初始位置产生了位移。
如果监听到控件被点击，并且相对初始位置产生了位移，则获取鼠标在画布的像素位置。之后由鼠标在画布的像素位置、画布的宽度和高度以及目标图层中心相对画布中心的位移，就可以计算出控件被移动后，其在参考坐标系下的位置。
渲染模块603，用于根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。分别计算位移监听事件触发前后，控件到所述目标图层中心的距离，得到的两个距离的比值即缩放数据。将参考坐标系的原点和控件的初始位置、移动位置分别连接，以构建两个向量，两个向量之间的夹角即旋转数据。
之后将缩放数据和旋转数据通过参数传递方式，传递到着色器，使用着色器对目标图层进行渲染，以将变化应用到目标图层，从而实现通过一个控件同时进行缩放与旋转两种操作的目的。
另外，本发明实施例的目标图层缩放旋转的装置600还可以包括：更新模块和绑定模块(图6中未示出)。其中，更新模块，用于使用移动位置更新初始位置。绑定模块用于为控件绑定位移监听事件。
从以上描述可以看出，在目标图层的控件上设置位移监听事件，当位移监听事件触发后，将控件的初始位置与移动位置进行比对，得到缩放数据和旋转数据，并应用于目标图层，使得本申请通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验。
图7示出了可以应用本发明实施例的目标图层缩放旋转的方法或目标图层缩放旋转的装置的示例性系统架构700。
如图7所示，系统架构700可以包括终端设备701、702、703，网络704和服务器705。网络704用以在终端设备701、702、703和服务器705之间提供通信链路的介质。网络704可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备701、702、703通过网络704与服务器705交互，以接收或发送消息等。终端设备701、702、703上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备701、702、703可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。服务器705可以是提供各种服务的服务器。
需要说明的是，本申请实施例所提供的目标图层缩放旋转的方法一般由终端设备701、702、703执行，相应地，目标图层缩放旋转的装置一般设置于终端设备701、702、703中。
应该理解，图7中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
根据本发明的实施例，本发明还提供了一种电子设备和一种计算机可读介质。
本发明的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例的一种目标图层缩放旋转的方法。
本发明的计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例的一种目标图层缩放旋转的方法。
下面参考图8，其示出了适用于来实现本发明实施例的电子设备的计算机系统800的结构示意图。图8示出的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图8所示，计算机系统800包括中央处理单元(CPU)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有计算机系统800操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地，根据本发明公开的实施例，上文主要步骤图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行主要步骤图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括第一位置计算模块、第二位置计算模块和渲染模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，第一位置计算模块还可以被描述为“根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置的模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置；根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。
从以上描述可以看出，在目标图层的控件上设置位移监听事件，当位移监听事件触发后，将控件的初始位置与移动位置进行比对，得到缩放数据和旋转数据，并应用于目标图层，使得本申请通过一个控件同时实现了旋转与缩放，降低了操作复杂程度，提升了用户体验。
上述产品可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明实施例所提供的方法。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种目标图层缩放旋转的方法，其特征在于，包括：
根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；
当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置；
根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。
2.根据权利要求1所述的方法，其特征在于，计算所述目标图层产生的缩放数据，包括：
在所述位移监听事件触发之前，计算所述控件到所述目标图层中心的第一距离；
在所述位移监听事件触发之后，计算所述控件到所述目标图层中心的第二距离；
以所述第二距离为被除数，所述第一距离为除数进行除法运算，得到所述目标图层产生的缩放数据。
3.根据权利要求1所述的方法，其特征在于，计算所述目标图层产生的旋转数据，包括：
将所述初始位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第一向量；
将所述移动位置的横纵坐标与所述目标图层中心的横纵坐标相应做差，以构建第二向量；
计算所述第一向量和所述第二向量的夹角，得到所述目标图层产生的旋转数据。
4.根据权利要求3所述的方法，其特征在于，计算所述第一向量和所述第二向量的夹角，包括：
计算所述第一向量和所述第二向量的夹角弧度值；
根据所述第一向量和所述第二向量，判断向量的旋转方向；
根据所述旋转方向，修正所述夹角弧度值。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：
使用所述移动位置更新所述初始位置；
使用所述缩放数据和所述旋转数据对所述目标图层进行渲染，包括：
使用参数传递方法，将所述缩放数据和所述旋转数据传递到着色器，以使用所述着色器对所述目标图层进行渲染。
6.根据权利要求1所述的方法，其特征在于，获取鼠标在画布的像素位置，包括：
定义位置获取函数，其中，所述位置获取函数的参数为事件对象，所述事件对象用于获取鼠标相对于目标视窗的位置集合；
为画布对象绑定鼠标移动事件，当所述鼠标移动事件触发，通过所述位置获取函数返回的事件对象，得到所述鼠标在画布的像素位置。
7.根据权利要求1至6的任一项所述的方法，其特征在于，将所述方法应用于WebGL或者SVG中，以通过所述控件同时实现所述目标图层的缩放与旋转。
8.一种目标图层缩放旋转的装置，其特征在于，包括：
第一位置计算模块，用于根据画布基本参数、目标图层基本参数以及目标图层中心相对画布中心的位移，计算设置于目标图层上的控件在参考坐标系下的初始位置；
第二位置计算模块，用于当所述控件预先绑定的位移监听事件触发后，获取鼠标在画布的像素位置，以根据所述像素位置、所述画布基本参数和所述位移，计算所述控件在所述参考坐标系下的移动位置；
渲染模块，用于根据所述初始位置和所述移动位置，分别计算所述目标图层产生的缩放数据和旋转数据，以使用所述缩放数据和所述旋转数据对所述目标图层进行渲染。
9.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。
CN201911233868.5A 2019-12-05 2019-12-05 一种目标图层缩放旋转的方法和装置 Pending CN112925593A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911233868.5A CN112925593A (zh) 2019-12-05 2019-12-05 一种目标图层缩放旋转的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911233868.5A CN112925593A (zh) 2019-12-05 2019-12-05 一种目标图层缩放旋转的方法和装置

Publications (1)

Publication Number Publication Date
CN112925593A true CN112925593A (zh) 2021-06-08

Family

ID=76161225

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911233868.5A Pending CN112925593A (zh) 2019-12-05 2019-12-05 一种目标图层缩放旋转的方法和装置

Country Status (1)

Country Link
CN (1) CN112925593A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113392246A (zh) * 2021-06-15 2021-09-14 万翼科技有限公司 一种图纸显示方法、装置、存储介质和电子设备
CN113919285A (zh) * 2021-11-16 2022-01-11 方正株式(武汉)科技开发有限公司 一种画布编辑的实现方法
CN114281234A (zh) * 2021-12-16 2022-04-05 北京沃东天骏信息技术有限公司 图像显示方法、装置及存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004042519A2 (en) * 2002-11-01 2004-05-21 Parker-Hannifin Corporation Human-machine interface system and method
CN103677828A (zh) * 2013-12-10 2014-03-26 华为技术有限公司 一种图层绘制方法、绘图引擎及终端设备
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN107967102A (zh) * 2017-12-29 2018-04-27 北京酷我科技有限公司 一种Android系统中的视图控件
CN109918604A (zh) * 2019-03-07 2019-06-21 智慧芽信息科技(苏州)有限公司 网页绘图方法、装置、设备及存储介质
CN110007983A (zh) * 2019-03-29 2019-07-12 网易传媒科技（北京）有限公司 粒子喷射动画的实现方法、介质、装置和计算设备
US20190303178A1 (en) * 2018-03-30 2019-10-03 FullStory, Inc. Capturing and processing interactions with a user interface of a native application

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004042519A2 (en) * 2002-11-01 2004-05-21 Parker-Hannifin Corporation Human-machine interface system and method
CN103677828A (zh) * 2013-12-10 2014-03-26 华为技术有限公司 一种图层绘制方法、绘图引擎及终端设备
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN107967102A (zh) * 2017-12-29 2018-04-27 北京酷我科技有限公司 一种Android系统中的视图控件
US20190303178A1 (en) * 2018-03-30 2019-10-03 FullStory, Inc. Capturing and processing interactions with a user interface of a native application
CN109918604A (zh) * 2019-03-07 2019-06-21 智慧芽信息科技(苏州)有限公司 网页绘图方法、装置、设备及存储介质
CN110007983A (zh) * 2019-03-29 2019-07-12 网易传媒科技（北京）有限公司 粒子喷射动画的实现方法、介质、装置和计算设备

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113392246A (zh) * 2021-06-15 2021-09-14 万翼科技有限公司 一种图纸显示方法、装置、存储介质和电子设备
CN113392246B (zh) * 2021-06-15 2024-04-05 深圳市万翼数字技术有限公司 一种图纸显示方法、装置、存储介质和电子设备
CN113919285A (zh) * 2021-11-16 2022-01-11 方正株式(武汉)科技开发有限公司 一种画布编辑的实现方法
CN114281234A (zh) * 2021-12-16 2022-04-05 北京沃东天骏信息技术有限公司 图像显示方法、装置及存储介质

Similar Documents

Publication Publication Date Title
CN112925593A (zh) 一种目标图层缩放旋转的方法和装置
CN114494328B (zh) 图像显示方法、装置、电子设备及存储介质
CN116310036A (zh) 场景渲染方法、装置、设备、计算机可读存储介质及产品
CN114564106B (zh) 交互指示线的确定方法、装置、电子设备及存储介质
WO2024174871A1 (zh) 一种图像处理方法、装置、设备及介质
CN114677469A (zh) 渲染目标图像的方法、装置、电子设备及存储介质
US20230298265A1 (en) Dynamic fluid effect processing method and apparatus, and electronic device and readable medium
CN114742934A (zh) 图像渲染方法、装置、可读介质及电子设备
CN111862342B (zh) 增强现实的纹理处理方法、装置、电子设备及存储介质
CN115131471B (zh) 基于图像的动画生成方法、装置、设备及存储介质
CN114968041B (zh) 基于图形的事件响应方法、装置、设备和介质
CN115761197A (zh) 图像渲染方法、装置、设备及存储介质
CN117311837A (zh) 视觉定位参数更新方法、装置、电子设备及存储介质
CN114937059A (zh) 显示对象的运动控制方法及设备
CN114564268A (zh) 一种设备管理方法、装置、电子设备和存储介质
CN116775174A (zh) 一种基于用户界面框架的处理方法、装置、设备及介质
CN112930556B (zh) 集成用于可视化大数据集的第三方几何结构的系统和方法
CN112395826B (zh) 文字特效处理方法及装置
CN110070479A (zh) 图像变形拖拽点定位方法和装置
CN116880726B (zh) 3d空间的图标交互方法、装置、电子设备和介质
CN110807824B (zh) 噪声优化方法、装置、终端设备以及存储介质
CN113838201B (zh) 模型适配方法、装置、电子设备及可读存储介质
US20240290026A1 (en) Method and apparatus for controlling motion of moving object, device, and storage medium
WO2023216971A1 (zh) 特效视频生成方法、装置、电子设备及存储介质
US20240153128A1 (en) Method of detecting collision of objects, device, and storage medium

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