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

Question

如何在缩放，旋转，平移等后在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.       
}

Answer 1

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

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

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

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

如果浏览器没有支持，那么事情会变得更复杂，因为你必须自己维护转换。有很多关于如何在stackoverflow上执行此操作的示例。一旦你有了矩阵，只需反转并应用于鼠标坐标。