最近在制作公司的一個(gè)項(xiàng)目時(shí)有運(yùn)用到canvas與屏幕坐標(biāo)互相轉(zhuǎn)換的一個(gè)知識(shí)點(diǎn)，如果沒(méi)有進(jìn)行canvas縮放、旋轉(zhuǎn)、平移一系列操作時(shí)，這個(gè)需求還是比較簡(jiǎn)單的，但是如果操作復(fù)雜起來(lái)后，要再進(jìn)行轉(zhuǎn)換，在不知道一些特定api就顯得比較困難了，在查閱了了一些資料后解決了這個(gè)需求這里分享給大家。

解決思路

解決這個(gè)需求時(shí)引用了兩個(gè)API，分別是CanvasRenderingContext2D.getTransform()、
DOMMatrix.invertSelf()

CanvasRenderingContext2D.getTransform()可以獲取當(dāng)前canvas上下文的被應(yīng)用的轉(zhuǎn)換矩陣，返回DOMMatrix對(duì)象。

DOMMatrix.invertSelf()可以獲取當(dāng)前矩陣逆轉(zhuǎn)后的結(jié)果，注意這個(gè)api是會(huì)修改自身矩陣的。

我們通過(guò)這兩個(gè)API可以獲取當(dāng)前canvas的DOMMatrix，然后將其逆轉(zhuǎn)，通過(guò)逆轉(zhuǎn)后的轉(zhuǎn)換矩陣就可以獲取屏幕坐標(biāo)轉(zhuǎn)對(duì)應(yīng)的canvas坐標(biāo)了。

源碼

// 獲取canvas的逆轉(zhuǎn)轉(zhuǎn)換矩陣
const getCanvasInverImatrix = $canvas => {
  const ctx = $canvas.getContext('2d')
  const transform = ctx.getTransform()
  return transform.invertSelf();
}

// canvas坐標(biāo)轉(zhuǎn)屏幕坐標(biāo)
export const canvasConversionScreen= ($canvas, { x, y }) => {
  const imatrix = getCanvasInverImatrix($canvas)

  // 如果不能求逆is2D()將會(huì)為false
  if (imatrix.is2D()) {
    const { 
      a, b, c, 
      d, e, f 
    } = imatrix

    const screenX = (c * y - d * x + d * e - c * f) / (b * c - a * d)
    const screenY = (y - screenX * b - f) / d

    return {
      x: Math.round(screenX),
      y: Math.round(screenY),
    }
  } else {
    return {
      x: NaN,
      y: NaN
    }
  }

}

// 屏幕坐標(biāo)轉(zhuǎn)canvas坐標(biāo)
export const screenConversionCanvas = ($canvas, { x, y }) => {
  const imatrix = getCanvasInverImatrix($canvas)

  if (imatrix.is2D()) {
    const { 
      a, b, c, 
      d, e, f 
    } = imatrix

    return {
      x: Math.round(x * a + y * c + e),
      y: Math.round(x * b + y * d + f)
    };
  } else {
    return {
      x: NaN,
      y: NaN
    }
  }
}

注意：DOMMatrix.invertSelf() 是會(huì)修改自身矩陣的，所以切忌多次調(diào)用，多次調(diào)用會(huì)逆轉(zhuǎn)后再次逆轉(zhuǎn)。當(dāng)canvas在網(wǎng)頁(yè)中不是位于左上角時(shí)，傳入的屏幕坐標(biāo)還要進(jìn)行視口處理，推薦使用Element.getBoundingClientRect()API。

兼容性

CanvasRenderingContext2D.getTransform()

getTransform-compatibility.png

DOMMatrix.invertSelf()

inverSelf-compatibility.png

可以看到兼容性還是比較良好的，如果沒(méi)有要求兼容IE就放心大膽的用吧。