如何在touch事件中模拟mouse事件中的offsetX offsetY

发表于 更新于 分类于 阅读次数： 本文字数： 864 阅读时长 ≈ 3 分钟

1. 起因

最近想制作一个在散开的纸面画画的效果，纸面会按一定角度倾斜，就像下面这样↓
canvas
也就是给canvas元素加了transform: roate(-2deg)

2. 电脑端实现

在电脑端很容易实现,鼠标事件中有offsetX Y，能够获得鼠标位置相对于目标节点的位置，可以简单理解为相对于元素左上角的坐标。获得坐标后，再按坐标绘制到Canvas上，一切就OK了，不过到了移动端就有点麻烦了。

3. 移动端实现

移动端touch事件有以下几个属性

  • ClientX Y 相对于视口的坐标
  • pageX Y 相对于页面左上角原点的坐标
  • screenX Y 相对于屏幕的坐标标
  • movementX Y 相对于上一次坐标的坐标

然而就是没有offsetX Y，怎么办，自己模拟试试？

3.1 第一次模拟

  1. 获得pageX Y
  2. 通过offsetTop left计算元素左上角的顶点位置vertex
  3. 计算相对坐标

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getVertexPosition(el) {
    let currentTarget = el
    let top = 0
    let left = 0
    while (currentTarget !== null) {
        top += currentTarget.offsetTop
        left += currentTarget.offsetLeft
        currentTarget = currentTarget.offsetParent
    }
    return { top, left }
}

let vertex = getVertexPosition(canvas)
canvas.addEventListener('touchmove',(e)=>{
    let offsetX = e.pageX-vertex.left
    let offsetY = e.pageX-vertex.top
})

在页面没有设置任何transform属性的情况下，这个代码是生效的，能获得正确的坐标点。
然而如果父元素或目标元素有任何transform属性，坐标就会错误，比如本文中的canvas元素，设置了transform: roate(-2deg),坐标就发生了偏移。
随后搜索了一下是否有类似的解决方案，结果都是这样的代码，都不能对transform元素生效。

3.2 偏移原因

偏移原因是因为变换后，元素的坐标轴已经改变了，而我们得到的坐标还是变换前的坐标，自然而然就发生错误了。
坐标图
如图所示，实际触摸点是绿色，本应也绘制在绿色坐标点，但是我们现在的坐标系仍然是之前的坐标系，就导致了绘制点相对于原来的坐标点绘制，也即紫色，导致绘制偏移。
解决办法也很简单，将触摸点按照新坐标系计算得到值，就是真实的相对坐标了。
步骤：

  1. 获得点击坐标（pageX pageY）
  2. 获得旋转角度 旋转中心
  3. 将旋转中心于元素顶点坐标相加，得到整个页面的旋转中心
  4. 旋转相同负角度（逆运算），将点击坐标还原到真实的坐标系
  5. 减去顶点坐标，获得真实相对坐标。

第二次模拟

  1. 首先获得计算后的样式，获得transform相关属性

    1
    2
    let style = window.getComputedStyle(el)
    console.log(style)

    获得的transform属性如下

    1
    2
    3
    4
    transform: "matrix(0.999391, -0.0348995, 0.0348995, 0.999391, 0, 0)"
    transformBox: "view-box"
    transformOrigin: "160px 240px"
    transformStyle: "flat"

    关于transform:matrix以及如何理解查看张鑫旭的文章。
    简而言之，就是transform属性都是通过transform:matrix进行矩阵计算得到坐标的。

  2. 解析transform属性
    由于这里涉及到矩阵运算，需要引入math.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    let transform = style.transform
    let transformOrigin = style.transformOrigin
    let origin = { x: 0, y: 0 }
    let matrix = math.ones([3, 3])
    if (transform !== 'none') {
        let originArray = transformOrigin.split(' ')
        origin.x = parseInt(originArray[0])
        origin.y = parseInt(originArray[1]) //矩阵的坐标变化是基于变换中心得。
        let matrixString = transform.match(/\(([^)]*)\)/)[1]
        let stringArray = matrixString.split(',')
        let temp = []
        stringArray.forEach((value) => {
            temp.push(parseFloat(value.trim()))
        })
        temp = [
            [temp[0], temp[2], temp[4]],
            [temp[1], temp[3], temp[5]],
            [0, 0, 1],
        ]
        matrix = math.inv(temp) //进行逆矩阵
    } else {
        matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]]
    }

    这样我们就得到了原变换矩阵的逆矩阵和变换中心，就能将触摸点正确的还原到原坐标系了

  3. 计算

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function computPosition(obj){
        let { matrix, origin, vertex: { top, left },ponit:{x,y} } = obj
        x = x - left - origin.x
        y = y - top - origin.y
        let result = math.multiply(matrix, [x, y, 1])
        x = result[0] + origin.x
        y = result[1] + origin.y
        return (x,y)
    }

  4. 实际实现

    1. 由于子元素会受到父元素变换影响，因此需要遍历所有父元素
    2. 由于getComputStyle()和获得顶点坐标有较大性能消耗，最好将相关参数缓存起来
      实际代码实现见此https://github.com/Geylnu/touch-offset

其它

W3C给出了没有为touch事件添加offsetX Y的原因https://github.com/w3c/touch-events/issues/62