2

我之前问过这个问题，回复告诉我我知道我需要做什么但没有提供示例，所以我还没有找到解决方案。

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

问题是，不同尺寸屏幕的像素值不同。有人告诉我，为了根据用户的屏幕尺寸来计算用户点击的位置，我需要：

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

我对“将每个 x 乘以标准宽度并除以实际宽度”感到困惑。我继续尝试缩放。我发现panhandle的第一个边缘距离屏幕左侧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!");
        }   
     }

当我在panhandle的水平范围内单击时，这应该会弹出一个警报，但没有任何反应。我确实注意到我没有将任何值除以“实际宽度”。有人可以提供一个如何“将每个 x 乘以您的规范宽度并除以实际宽度”的示例吗？

4

2 回答 2

2

他们所说的规范宽度的意思是“正常”宽度 - 在您的情况下是图像的原始大小。

假设您用于地图的图像通常为 1280 x 1600 像素（仅用于参数），那么您的标准高度为 1600 像素，标准宽度为 1280 像素。

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

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

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

说了这么多，我真的不推荐！这是使用 html 图像映射的完美案例：http: //htmldog.com/reference/htmltags/map/。看看这个！

希望这可以帮助！

于 2011-03-21T14:04:21.503 回答
1

我不知道这个圆锥形的东西，但从数学上讲，我以一种非常简单的方式看到了你的问题。我猜你的地图是一张图片，一张图片的大小是固定的。假设您的地图是 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);
 });

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

于 2011-03-21T14:50:20.580 回答