Question

这是我的问题，我创建了一个Web应用程序，您需要加载文件（图像），然后在调整大小后它出现在画布中，以便不超过1500像素。然后我使用像这样编程的画布缩放（另一个画布，我可以放大鼠标位置）：

var x1, wdth1, psx1, wdth2, y1, heg1, psy1, heg2;
function drawZoom(x, y) {
    $('#zoom').css({
        'left': x - (parseInt($('#zoom').css('width')) / 2),
        'top': y - (parseInt($('#zoom').css('height')) / 2)
    });
    // console.log([x,y]);
    $('#zoom').show(function () {
        if (x < 25) {
            x1 = 0;
            wdth1 = (x + zoom_level / 2) * ratio;
            psx1 = (25 - x) * 2;
            wdth2 = 100 - psx1;
        } else if (x > width_canvas - zoom_level/ 2) {
            x1 = (x - zoom_level/ 2) * ratio;
            wdth1 = (width_canvas - x + zoom_level/ 2) * ratio;
            psx1 = 0;
            wdth2 = 100 - 2 * (x + zoom_level/ 2 - width_canvas);
        } else {
            x1 = (x - zoom_level/ 2) * ratio;
            wdth1 = zoom_level* ratio;
            psx1 = 0;
            wdth2 = 100;
        }
        if (y < 25) {
            y1 = 0;
            heg1 = (y + zoom_level/ 2) * ratio;
            psy1 = (25 - y) * 2;
            heg2 = 100 - psy1;
        } else if (y >= height_canvas - zoom_level/ 2) {
            y1 = (y - zoom_level/ 2) * ratio;
            heg1 = (height_canvas - y + zoom_level/ 2) * ratio - 1;
            psy1 = 0;
            heg2 = 100 - 2 * (y + zoom_level/ 2 - height_canvas);
        } else {
            y1 = (y - zoom_level/ 2) * ratio;
            heg1 = zoom_level* ratio;
            psy1 = 0;
            heg2 = 100;
        }
        // console.log(heg1);
        zoomctx.fillStyle = "black";
        zoomctx.fillRect(0, 0, 100, 100);
        zoomctx.drawImage(canvas, x1, y1, wdth1, heg1, psx1, psy1, wdth2, heg2);
    });
    zoomctx.beginPath();
    zoomctx.moveTo(0, 50);
    zoomctx.lineTo(100, 50);
    zoomctx.moveTo(50, 0);
    zoomctx.lineTo(50, 100);
    zoomctx.closePath();
    zoomctx.stroke();
}

然后我保存点击的位置并使用它们来计算距离等....（另一个故事）所以我有一个重置按钮，当你开始点击并失败时，你可以重新启动4点击之一，它会删除所有点并重新启动功能。

问题：

-Chrome：像魅力一样，没有问题，变焦很好，导航流畅，重启效果很好......等等。

-Firefox：我的左上角有一个黑色的圆圈（它是变焦，但它全是黑色，不工作），它不移动，我可以点击并重新启动，但我看不到我点击的位置和点击后的过程不起作用。

-Safari：图像看起来很好，当我第一次加载图像时缩放是可以的，我可以点击4次，其余的程序工作正常但是如果我重新开始那么缩放就像我把鼠标移了在某处，缩放并没有向我显示正确的位置。

所以我在chrome上没有问题，在safari和mozilla firefox上有两个不同的问题，在控制台中没有错误。

我是初学者，所以我不知道是否有一些限制作为CSS中的“webkit”JS。

告诉我您是否需要更多信息！谢谢！

Answer 1

我发现firefox正在发生什么，这只是一个更新问题。我的朋友用他们的firefox版本测试了它，一切都很好，我更新了我的firefox（认为它是单独做这个，但显然不是）并且它工作正常。如果这是同样的问题，我会尝试使用safari

Answer 2

Firefox不支持画布绘制，但有Mozilla特定的替代品。见https://caniuse.com/#search=Canvas

对于重置徒步旅行中的定位问题，请发布重置按钮功能。有可能，您缺少一些位置/坐标跟踪的重新初始化。

Javascript（JS）应用程序在Chrome上运行但在mozilla firefox / safari上运行

2 个答案: