Question

之前我已经问过这个问题了，回复告诉我我知道我需要做什么，但没有提供一个例子，所以我还没有想出解决方案。

我有一个名为“容器”的初始div，它是俄克拉荷马州地图的height:100% width:100%图像。这个想法是当用户点击地图的某个部分（对于这个例子，狭长）时，div被切换到一个div，这是一个狭长的图像。我通过了解鼠标点击时的像素位置来确定用户点击的位置。

问题是，不同尺寸屏幕的像素值不同。我被告知，为了根据用户的屏幕尺寸缩放我的计算位置，我需要：

在比较之前缩放每个值。将每个x乘以规范宽度并除以实际宽度，并对y和高度执行相同的操作。

我很困惑“将每个x乘以规范宽度并除以实际宽度。”我继续前进并尝试扩展。我发现手柄的第一个边缘距离屏幕左侧3.1％，最远边缘距离屏幕左侧35.7％。我有以下代码：


$("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        // Variables for area of pan handle
        /* These variables do not seem to work yet */
        var xScale1 = 0.031*x;
        var xScale2 = 0.357*x;

        if(x >= xScale1 && x "less-than"= xScale2) 
        {
        alert("You clicked the panhandle!");
        }   
     }

当我在狭长地带的水平限制内点击时，这应该弹出一个警报，但什么也没发生。我注意到我没有将任何值除以“实际宽度”。有人可以提供一个例子，说明如何“将每个x乘以规范宽度并除以实际宽度”？

Answer 1

Canonical width的含义是'normal'宽度 - 在你的情况下是图像的原始大小。

假设您用于地图的图像通常为1280 x 1600像素（仅用于参数），则规范高度为1600像素，规范宽度为1280像素。

所以，如果我在尺寸为800 x 600像素的屏幕上观看图像 - 即800像素高和600像素高 - 那么我需要将图像缩放为800/1600 = 0.5倍的高度，和600/1250 =宽度小0.48倍。

同样，如果我点击屏幕左侧的第400个像素，然后点击我实际屏幕顶部的第200个像素，那么我可以通过除以先前建立的比率来获得我的“规范”位置。所以（400,200）=＆gt; （800,416.7）。

然后，您可以使用这些规范化的值来查找他们单击的图像部分。

说完所有这些，我不会真的推荐！这是使用html图像映射的完美案例：http://htmldog.com/reference/htmltags/map/。看看吧！

希望这有帮助！

Answer 2

我不知道这个圆锥形的东西，但在数学上我以一种非常简单的方式看待你的问题。我猜你的地图是一个图像，一个图像有一个恒定的大小。假设你的地图是100x100。如果屏幕尺寸为200x200，则屏幕比地图大2倍。

xScreen = 2*xMap;
yScreen = 2*yMap;

因此，屏幕使用的所有值都比实际地图使用的值大2倍。如果用户单击200x200屏幕中的50,50像素，则必须将此值除以2（比例）在100x100地图中得到25,25。关键是通过划分屏幕的总大小和地图的总大小来找到比例。在这种情况下：

xScreen/xMap = 2;//200/100 = 2;
yScreen/yMap = 2;//200/100 = 2;

以下是找到比例的代码：

var xScreen = screen.width;
var yScreen = screen.height;
var xProportion = xScreen/xSizeOfYourMap;
var yProportion = yScreen/ySizeOfYourMap;
$("#container").click(function(e)
{
    var x1 = event.pageX;
    var y1 = event.pageY;

    var x2 = x1/xProportion;
    var y2 = y1/yProportion;

    alert("x of screen:"+x1+" - x of map:"+x2);
 });

现在，如果用户点击了您想要的区域，您可以计算地图上点击的值。对于所有计算，数字需要通过比例。

检测不同屏幕尺寸的图像中鼠标点击的位置 - JS / Jquery

2 个答案: