Erkennen der Position der Mausklicken Sie in einem Bild auf verschiedenen Bildschirmgrößen - JS/JQuery

Question

Ich habe diese Frage schon einmal gestellt, und die Antworten haben mir gesagt, was ich wusste, dass ich es tun musste, aber kein Beispiel gegeben habe, also habe ich noch keine Lösung herausgefunden.

Ich habe eine erste DIV namens "Container", die a ist height:100% width:100% Bild einer Karte von Oklahoma. Die Idee ist, dass, wenn der Benutzer auf einen bestimmten Abschnitt der Karte klickt (für dieses Beispiel, der Panhandle), das Div zu einem DIV umgeschaltet wird, das das Panhandle -Bild ist. Ich bestimme, wo der Benutzer klickt, indem ich den Pixelort der Maus kennt, wenn sie klickt.

Das Problem ist, dass Pixelwerte für Bildschirme verschiedener Größe unterschiedlich sind. Mir wurde mitgeteilt, dass ich, um meine Berechnungen für den Benutzer auf der Grundlage seiner Bildschirmgröße zu skalieren, zu skalieren:

Skalieren Sie jeden Wert, bevor Sie ihn vergleichen. Multiplizieren Sie jedes x mit Ihrer kanonischen Breite und teilen Sie sich durch die tatsächliche Breite und tun Sie dasselbe mit y und Höhe.

Ich bin verwirrt von "Multiplizieren Sie jedes x mit Ihrer kanonischen Breite und teilen Sie durch die tatsächliche Breite." Ich machte mich trotzdem mit der Skalierung. Ich fand heraus, dass die erste Kante des Panhandle 3,1% von der linken Seite des Bildschirms entfernt ist und die am weitesten entfernte Kante 35,7% von der linken Seite des Bildschirms entfernt ist. Ich habe den folgenden Code:

$("#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!");
        }   
     }  

Dies sollte eine Warnung aufbauen, wenn ich in die horizontalen Einschränkungen des Panhandle klicke, aber nichts passiert. Ich bemerke, dass ich keine meiner Werte durch "tatsächliche Breite" aufteile. Könnte jemand bitte ein Beispiel dafür geben, wie man "jedes x mit Ihrer kanonischen Breite multiplizieren und durch die tatsächliche Breite teilt"?

Answer 1

Was sie unter kanonischer Breite bedeuten, ist die „normale“ Breite - in Ihrem Fall die native Größe des Bildes.

Angenommen, das Bild, das Sie für die Karte verwenden, ist normalerweise 1280 x 1600 px (nur für Argumente), Ihre kanonische Höhe beträgt 1600 px und Ihre kanonische Breite 1280 px.

Also, wenn ich das Bild auf einem Bildschirmgröße von 800 x 600 px betrachte - das ist 800 px hoch und 600 px hoch - dann muss ich das Bild auf 800 /1600 = 0,5 -mal kleiner und 600 / /600 /skalieren, und 600 / / 1250 = 0,48 -mal kleiner in Breite.

Wenn ich von der linken Seite des Bildschirms und 200. von oben auf meinem tatsächlichen Bildschirm auf das 400. Pixel klicke, kann ich meine kanonische Position durch die zuvor festgelegten Verhältnisse erhalten. Also (400, 200) => (800, 416,7).

Anschließend können Sie diese kanonischen Werte verwenden, um zu suchen, welchen Teil Ihres Bildes sie geklickt haben.

Trotzdem würde ich das nicht wirklich empfehlen! Dies ist ein perfekter Fall für die Verwendung von HTML -Imagemaps: http://htmldog.com/reference/htmltags/map/ . Hör zu!

Hoffe das hilft!

Answer 2

Ich weiß nichts über diese konische Sache, aber mathematisch sehe ich Ihr Problem auf eine sehr einfache Weise. Ich denke, Ihre Karte ist ein Bild und ein Bild hat eine konstante Größe. Nehmen wir an, Ihre Karte ist 100x100. Wenn die Größe des Bildschirms 200x200 beträgt, ist der Bildschirm 2 -mal größer als Ihre Karte.

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

Alle für den Bildschirm verwendeten Werte sind also 2 -mal größer als die für die tatsächlichen Karte verwendeten Werte. Wenn der Benutzer auf das 50,50 Pixel in Ihrem 200x200 -Bildschirm klickt, müssen Sie dies für 2 (den Anteil) teilen, der 25.25 in Ihrer 100x100 -Karte erhalten. Der Schlüssel besteht darin, den Anteil zu finden, indem die Gesamtgröße des Bildschirms und die Gesamtgröße Ihrer Karte geteilt wird. In diesem Fall:

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

Hier ist der Code, um den Anteil zu finden:

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);
 });

Jetzt haben Sie die Werte des Klickens auf die Karte, die Sie berechnen können, wenn der Benutzer auf den gewünschten Bereich geklickt hat. Für alle Ihre Berechnungen müssen die Zahlen den Anteil durchlaufen.