WEB端的画布放大、缩小偏移控制方法及画布重绘方法技术

本发明专利技术提供了一种WEB端的画布放大、缩小偏移控制方法及画布重绘方法，获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布放大或缩小的左偏移值和顶部偏移值；基于画布缩小或放大的偏移值计算结果修改画布dom元素、以及CSS样式中的transform

Canvas zoom in and zoom out offset control method and canvas redrawing method on web side

【技术实现步骤摘要】
WEB端的画布放大、缩小偏移控制方法及画布重绘方法


[0001]本专利技术涉及绘图自动化
，特别涉及一种WEB端的画布放大、缩小偏移控制方法及画布重绘方法。

技术介绍

[0002]本部分的陈述仅仅是提供了与本专利技术相关的
技术介绍
，并不必然构成现有技术。
[0003]在进行流程图的绘制时，随着业务场景的扩张与发展，一条业务线上的流程会愈加复杂。
[0004]专利技术人发现，当一个业务上的流程节点数几十上百之后，如果没有画布缩放功能，负责的业务人员将很难一览整个流程的全貌，并且在需要对整个流程图进行编辑或删减时需要多次拖动滚动条才能定位需要编辑的流程节点，这使得用户操作变得更加繁琐和不便。

技术实现思路

[0005]为了解决现有技术的不足，本专利技术提供了一种WEB端的画布放大、缩小偏移控制方法及画布重绘方法，避免了业务人员需要多次反复滚动滚动条才能定位相关流程节点的繁琐操作，可以通过对画布的缩放帮助业务人员一览整个流程图全貌，可以通过定点放大功能放大流程图上的部分区域帮助业务人员做流程局部分析。
[0006]为了实现上述目的，本专利技术采用如下技术方案：
[0007]本专利技术第一方面提供了一种WEB端的画布放大偏移控制方法。
[0008]一种WEB端的画布放大偏移控制方法，包括以下过程：
[0009]获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；/>[0010]获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；
[0011]以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布放大的左偏移值和顶部偏移值。
[0012]进一步的，将缩放原点的坐标值转换为缩放原点在画布上的相对百分比，包括：
[0013]缩放原点的左坐标值减去画布的左坐标值之差除以画布的宽度，缩放原点的右坐标值减去画布的右坐标值之差除以画布的高度。
[0014]进一步的，画布放大的左偏移值，包括：
[0015]transform_orgin.left
‑
视口左边框距离+(transform_orgin.left/100)*(画布宽度/(当前的缩放比例/100))。
[0016]进一步的，画布放大的上偏移值，包括：
[0017]transform_orgin.top
‑
视口底部边框距离+(transform_orgin.top/100)*(画布高度/(当前的缩放比例/100))。
[0018]本专利技术第二方面提供了一种WEB端的画布放大偏移控制系统。
[0019]一种WEB端的画布放大偏移控制系统，包括：
[0020]画布数据获取模块，被配置为：获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；
[0021]视口数据获取模块，被配置为：获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；
[0022]偏移值计算模块，被配置为：以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布放大的左偏移值和顶部偏移值。
[0023]本专利技术第三方面提供了一种WEB端的画布缩小偏移控制方法。
[0024]一种WEB端的画布缩小偏移控制方法，包括以下过程：
[0025]获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；
[0026]获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；
[0027]以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布缩小的左偏移值和顶部偏移值。
[0028]进一步的，将缩放原点的坐标值转换为缩放原点在画布上的相对百分比，包括：
[0029]缩放原点的左坐标值减去画布的左坐标值之差除以画布的宽度，缩放原点的右坐标值减去画布的右坐标值之差除以画布的高度。
[0030]进一步的，画布放大的左偏移值，包括：
[0031]transform_orgin.left
‑
视口左边框距离+(transform_orgin.left/100)*(画布宽度/(当前的缩放比例/100))。
[0032]进一步的，画布放大的上偏移值，包括：
[0033]transform_orgin.top
‑
视口底部边框距离+(transform_orgin.top/100)*(画布高度/(当前的缩放比例/100))。
[0034]本专利技术第四方面提供了一种WEB端的画布缩小偏移控制系统。
[0035]一种WEB端的画布缩小偏移控制系统，包括：
[0036]画布数据获取模块，被配置为：获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；
[0037]视口数据获取模块，被配置为：获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；
[0038]偏移值计算模块，被配置为：以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布缩小的左偏移值和顶部偏移值。
[0039]本专利技术第五方面提供了一种WEB端的画布重绘控制方法。
[0040]一种WEB端的画布重绘控制方法，利用第一方面所述的画布放大偏移控制方法或第二方面所述的画布缩小偏移控制方法，包括以下过程：
[0041]基于画布缩小或放大的偏移值计算结果修改画布dom元素、以及CSS样式中的transform
‑
origin和transform两个值，对画布dom元素进行位移以及缩小或放大；
[0042]transform
‑
origin的值为上一步输出的缩放原点在画布上的相对百分比，
transform的值为画布左偏移值及画布顶部偏移值的组合。
[0043]进一步的，通过捕获到的鼠标滚动事件的delta值来判断画布缩放，在数据一致性的前提下，delta值为正则调用画布放大偏移控制方法，delta为负则调用画布缩小偏移控制方法。
[0044]本专利技术第六方面提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如第一方面所述的画布放大偏移控制方法或第三方面所述的画布缩小偏本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种WEB端的画布放大偏移控制方法，其特征在于：包括以下过程：获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布放大的左偏移值和顶部偏移值。2.如权利要求1所述的WEB端的画布放大偏移控制方法，其特征在于：将缩放原点的坐标值转换为缩放原点在画布上的相对百分比，包括：缩放原点的左坐标值减去画布的左坐标值之差除以画布的宽度，缩放原点的右坐标值减去画布的右坐标值之差除以画布的高度；或者，画布放大的左偏移值，包括：transform_orgin.left
‑
视口左边框距离+(transform_orgin.left/100)*(画布宽度/(当前的缩放比例/100))；或者，画布放大的上偏移值，包括：transform_orgin.top
‑
视口底部边框距离+(transform_orgin.top/100)*(画布高度/(当前的缩放比例/100))。3.一种WEB端的画布放大偏移控制系统，其特征在于：包括：画布数据获取模块，被配置为：获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；视口数据获取模块，被配置为：获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；偏移值计算模块，被配置为：以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布放大的左偏移值和顶部偏移值。4.一种WEB端的画布缩小偏移控制方法，其特征在于：包括以下过程：获取基于画布dom节点上定义的getClientRects()方法得到的画布边框属性，包括画布的左边框距离、底部边框距离、第一宽度和第一高度；获取基于视口dom节点上定义的getClientRects()方法得到的画布边框属性，包括视口的左边框距离、底部边框距离、宽度和高度；以用户滚轮事件触发时鼠标的坐标值为缩放原点，结合获取的上述数据，得到画布缩小的左偏移值和顶部偏移值。5.如权利要求4所述的WEB端的画布缩小偏移控制方法，其特征在于：将缩放原点的坐标值转换为缩放原点在画布上的相对百分比，包括：缩放原点的左坐标值减去画布的左坐标值之差除以画布的宽度，缩放原点的右坐标值
减去画布的右坐标值之差除以画布的高度；或者，画布放大的左偏移值，包括：transform_orgi...

【专利技术属性】
技术研发人员：徐睿智，孟庆峰，李扬，孙露，宫传华，卢凤，
申请(专利权)人：山东亿云信息技术有限公司，
类型：发明
国别省市：