0

目标

我正在尝试在 SVG 中构建签名板。您可以 在此处查看示例项目。

描述 到目前为止，它可以在 Chrome、Edge 和 Opera 中正常工作，但在 Firefox 中，getScreenCTM() 不考虑规模。

研究

我浏览了来自 bugzilla 的一堆文档以及 SO 中的一些帖子，例如SVG：GetScreenCTM() for nested SVG is different in Firefox但是，仍然无法弄清楚如何解决我的问题。

问题

我添加了一个浏览检查来仅处理 Firefox（因为所有其他浏览器都提供了所需的结果），这允许我添加额外的代码来解决问题，但到目前为止，还没有成功。（SP签名：416）

重现错误

要重现该错误，请在 FireFox 中打开示例链接，然后调整框的大小，使其至少比全屏时小 20%。您将看到鼠标 X/Y 位置随着比例的变化而变化。

我试图从组标签中获取矩阵变换，但是它从 SVG 返回了类似的结果。如何计算 CTM，使其结果类似于/等于 Chrome？

代码

源代码在这里SPSignature:416

 _getCursorPoint(event)
{
    const svg = document.querySelector('.spsignature svg');
    let pt = svg.createSVGPoint();

    pt.x = event.clientX;
    pt.y = event.clientY;

    // firefox workaround:
    if (this._checkBrowser() === 'Firefox') {
        const matrix = this._decomposeMatrix(svg.getScreenCTM());

        let cood = { 
            x: event.layerX, 
            y: event.layerY
        };

        if (matrix.scaleX < 0.9 || matrix.scaleY < 0.9) {
            console.log('%c @todo: fix mouse position for FF on getScreenCTM().', 'background:#c00;color:#fff;padding:3px;');
        }

        return cood;
    }

    return pt.matrixTransform(svg.getScreenCTM().inverse());
}
4

1 回答 1

-1

为了“修复”FF 上的鼠标 XY 问题，我使用了根刻度值来计算光标 XY 位置。

尺度可以从基于https://gist.github.com/2052247的矩阵中获取。

此外，在 FF 中，我使用event.layerXandevent.layerY而不是event.clientXandevent.clientY作为初始鼠标坐标值。

因此，matrixTransform(svg.getScreenCTM().inverse())我没有使用返回计算出的相对于 SVG 的 XY，而是使用了 scale 和 layerXY 来计算正确的 XY 位置。

于 2021-05-15T19:39:36.183 回答