缩放、旋转、平移等后如何在 HTML5 Canvas 中绘制鼠标指针？

【问题标题】：How to draw mouse pointer in HTML5 Canvas after Scale, Rotate, Translate, etc.?缩放、旋转、平移等后如何在 HTML5 Canvas 中绘制鼠标指针？
【发布时间】：2017-08-15 16:10:43
【问题描述】：

如何在 HTML5 Canvas 中缩放、旋转、平移等后绘制鼠标指针？

function drawImage() {
        clear();
        context.save();
        context.scale(currentScale, currentScale);
        context.rotate(currentAngle * Math.PI / 180);
        context.drawImage(image, -image.width / 2, -image.height / 

        // Here I should expect to draw mouse pointer after scale, rotate or translate.       
}

【问题讨论】：

标签： html canvas rotation scale translate

【解决方案1】：

您使用逆矩阵并将其应用于鼠标坐标。

若要获取当前矩阵，您可以使用ctx.currentTransform（如果可用），但浏览器支持 ATM 有限，因此您应先检查是否支持。

它返回一个SVGMatrix 对象或DOMMatrix 对象，具体取决于浏览器和版本，后者是新的（即将成为）标准。

当您拥有当前变换时，您将其反转（参见文档），然后将鼠标客户端坐标与逆矩阵相乘，以获得当前变换中鼠标的坐标。

如果浏览器不支持，那么事情会变得有些复杂，因为您必须自己维护转换。在 stackoverflow 上有很多如何做到这一点的例子。再次将矩阵反转并应用于鼠标坐标。

【讨论】：