[JavaScript] PositionX und PositionY der Maus falsch

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Smokers, 29. Januar 2012 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. Januar 2012
    PositionX und PositionY der Maus falsch

    Also hab folgendes kleines Script :

    Code:
    function mouse_down(evt){
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 0) {
 
 rect = svgDocument.createElementNS(svgns, "rect");
 rect.setAttributeNS(null,"x",evt.clientX);
 rect.setAttributeNS(null,"y",evt.clientY); 
 rect.setAttributeNS(null,"width","700"); //FIX 
 rect.setAttributeNS(null,"height","500"); //FIX
 rect.setAttributeNS(null,"fill","red"); 
 document.getElementById('paintable').appendChild(rect);
 
 }

 }
    Eigentlich ganz simpel, das problem ist wen ich klicke kommt folgendes :

    Das Objekt wird jedoch immer falsch positioniert, es scheint mir so um so näher ich der Mitte des Bildes komme um so exakter wird die Position.
    Umso weiter entfernt von der Mitte umso ungenauer und versetzer wird das Rechteck erzeugt.

    Habe nun schon ne Weile gesucht und folgenden Eintrag gefunden :

    Issue 244 -
    svgweb -

    Event mouse coordinates wrong in flash renderer -
    Scalable Vector Graphics for Web Browsers using Flash - Google Project Hosting
    Das trifft so ziemlich zu wenn mich nich alles täuscht, denn ich arbeite in einem SVG Bild.

    Mein Problem ist, ich raff das Workaround nichtmal bzw ich weis nicht wie ich das erwähnte :
    Code:
    if(document.getElementsByTagNameNS(svgns,'svg')[0].fake){ //use coordinates from flash renderer + offset of svg location on page
 [B]//--> Wo bekomm ich das offset her?[/B]
} else { // use native coordinates }
    Offset herausbekomme. :-/

    Jemand ne Idee?




    //mit pageX/pageY und clientX/clientY kann ich btw nix reißen, die sind immer gleich.
     
  3. 29. Januar 2012
    AW: PositionX und PositionY der Maus falsch

    ClientX und ClientY geben die Position des Mauszeigers im Sichtfeld des Browsers an.

    PageX und PageY hingegen geben die Position auf dem Dokument an.


    Scrollt man also eine Seite um 10px nach unten, so unterscheiden sich beide Y werte um 10


    Benutz PageX und PageY und ziehe von den Werten die X und Y Position deines Bildes ab. Dann hast du die Exakte Position des Mauszeigers.
     
  4. 29. Januar 2012
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: PositionX und PositionY der Maus falsch

    Leider ist es bei weitem nich so einfach ^^°°

    ich habs mal hochgeladen sonst kann sich das glaub ich auch keiner vorstellen was da fürn brain abgeht xD

    No File | www.xup.in

    wenn du das fenster so groß machst wie das svg bild ist, dann sind px der maus auch 0px im svg bild, gehst du weiter nach rechts mit der maus ist die mausposition*1,4 ungefähr die eigentliche position im bild ( ka warum 1, 4) wenn du das fenster wieder größer ziehst, is auch das nicht mehr korrekt.

    probier mal, das is ... keine ahnung.
     
  5. 29. Januar 2012
    AW: PositionX und PositionY der Maus falsch

    Die Basis ist 1024x768, aber du gibst dem SVG bei Width und Height 100%.

    Daher musst du zusätzlich die Aktuelle Darstellungsgröße deines SVG in die Berechnung mit einbeziehen.


    //Edit:
    Ist der Viewport des Users genau 1024x768 so stimmen alle Angaben genau.

    Ist der Viewport 512x384 also 50% bzw ein Zoom von 0.5 so müssen alle PageX und PageY angaben mit 0.5 Multipliziert werden.

    zoom = 0.5;
    PageX * zoom
    etz
     
  6. 29. Januar 2012
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: PositionX und PositionY der Maus falsch

    also ich habs ausprobiert, hier der angepasste JS code:

    Spoiler
    Code:
    <script type="text/ecmascript">
 var selectedDrawObject = 0;
 var drawableobjects = ["Linie","Rechteck","Elipse"];
 var statusnode;
 var dobj;
 var painted_objs =0;
 var edit = false;
 var bfaktor;
 var hfaktor;
 ///////
 var svgns = "http://www.w3.org/2000/svg";
 var mySelectionResult = new selectionResult();
 function selectionResult() { }
 var selBoxCellHeight = 16;
 var selBoxTextpadding = 3;
 var selBoxtextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};
 var selBoxStyles = {"stroke":"dimgray","stroke-width":1,"fill":"white"};
 var selBoxScrollbarStyles = {"stroke":"dimgray","stroke-width":1,"fill":"whitesmoke"};
 var selBoxSmallrectStyles = {"stroke":"dimgray","stroke-width":1,"fill":"lightgray"};
 var selBoxHighlightStyles = {"fill":"dimgray","fill-opacity":0.3};
 var selBoxTriangleStyles = {"fill":"dimgray"};
 //now the creation of the selectionlist
 var chObjSelList = new selectionList("objectChooser","chooseObject",drawableobjects,100,250,88,selBoxCellHeight,selBoxTextpadding,7,selBoxtextStyles,selBoxStyles,selBoxScrollbarStyles,selBoxSmallrectStyles,selBoxHighlightStyles,selBoxTriangleStyles,0,false,true,mySelectionResult);
 selectionResult.prototype.getSelectionListVal = function(selBoxName,nr,arrayVal) {
 selectedDrawObject = nr;
 updateSelectedObject();
 }
 function updateSelectedObject(){
 statusnode.textContent = 'Ausgewaehltes Objekt: '+ drawableobjects[selectedDrawObject];
 }
 function getFaktor(){
 bfaktor = 1024/window.innerWidth;
 hfaktor = 768/window.innerHeight;
 //alert("Breite Faktor :"+1024/window.innerWidth);
 //alert("Hoehe Faktor :"+768/window.innerHeight);
 }
 //---------------------------------------------------------------------
 function init() {
 statusnode = document.getElementById("selectedobject");
 updateSelectedObject();
 getFaktor();
 window.addEventListener('resize',getFaktor,false);
 }
 
 function mouse_down(evt){
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 painted_objs++;
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 edit = true;
 dobj = svgDocument.createElementNS(svgns, "rect");
 dobj.setAttributeNS(null,"x",evt.pageX*bfaktor);
 dobj.setAttributeNS(null,"y",evt.pageY*hfaktor);
 
 //js
 
 dobj.setAttributeNS(null,"onmousedown","mouse_down(evt);");
 dobj.setAttributeNS(null,"onmouseup","mouse_up(evt);");
 dobj.setAttributeNS(null,"onmousemove","mouse_move(evt);");
 //
 
 dobj.setAttributeNS(null,"id","obj"+painted_objs);
 dobj.setAttributeNS(null,"fill","red");
 document.getElementById('paintable').appendChild(dobj);

 }
 if(selectedDrawObject == 0) {
 
 }
 if(selectedDrawObject == 2) {
 
 }
 }
 function delete_all(){
 while(painted_objs >= 0){
 document.getElementById('paintable').removeChild(document.getElementById("obj"+painted_objs));
 painted_objs--;
 }
 painted_objs=0;
 }
 
 function mouse_up(evt){
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 dobj.setAttributeNS(null,"width",parseInt(evt.clientX*bfaktor)-parseInt(dobj.getAttribute('x')) );
 dobj.setAttributeNS(null,"height",parseInt(evt.clientY*hfaktor)-parseInt(dobj.getAttribute('y')));
 edit = false;
 }
 if(selectedDrawObject == 0) {
 
 }
 if(selectedDrawObject == 2) {
 
 }
 }
 
 function mouse_move(evt){
 if(edit == true) {
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 dobj.setAttributeNS(null,"width",parseInt(evt.clientX*bfaktor)-parseInt(dobj.getAttribute('x')) );
 dobj.setAttributeNS(null,"height",parseInt(evt.clientY*hfaktor)-parseInt(dobj.getAttribute('y')));
 }
 if(selectedDrawObject == 0) {
 
 }
 if(selectedDrawObject == 2) {
 
 }
 }
 }
 </script>

    Der Faktor scheint schon zu stimmen, aber das funzt halt nicht.
    wenn ich mit den Faktoren spiele, dann kann ich auch ein halbwegs brauchbares ergebnis erzielen, aber das ist dann wirklich nur für die fenstergröße gültig.

    mir scheint es irgendwie eher das der faktor wert logarithmisch ansteigt.aber , kein plan. ich fummel schon ne ganze weile und probiere rum...


    // obiger code funktioneirt jetzt mit der prämisse, dass das bild 100% des fensters einnimmt. dann geht es.

    was sich halt nach wie vor nicht berechnen lässt ist folgender bereich :

    Bild

    bzw falls das ganze oben und unten auftritt.
     
  7. 29. Januar 2012
    AW: PositionX und PositionY der Maus falsch

    Hilfreich für dich könnte folgender Code sein

    document.documentElement.getBoundingClientRect()

    Gibt folgendes zurück:
    Code:
    ClientRect
 bottom: 353
 height: 293.2474060058594
 left: 484.6666564941406
 right: 955.3333129882812
 top: 59.75260543823242
 width: 470.6666564941406
     
  8. 31. Januar 2012
    AW: PositionX und PositionY der Maus falsch

    Ich habs damit tatsächlich hinbekommen, murdoc und ich haben noch ein weilchen gerechnet und wir haben es zumindest für denn fall das dass fenster breiter ist als der anzeigebereich , hinbekommen.

    Spoiler
    Code:
    <svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="disable" onload="init()">
..................
..................
 
 //end of dropdown
 function sleep(milliseconds) {
 var start = new Date().getTime();
 while ((new Date().getTime() - start) < milliseconds){
 // Do nothing
 }
 }
 function updateSelectedObject(){
 statusnode.textContent = drawableobjects[selectedDrawObject] + ' gewaehlt.';
 }
 function getFaktor() {
 // client-rect von #dropable holen
 var rect = document.querySelector('#dropable').getBoundingClientRect();
 
 bfaktor = 1024 / rect.width;
 hfaktor = 768 / window.innerHeight;
 
 offsetTop = rect.top;
 offsetLeft = rect.left;
 }
 
 function getX(evt) {
 return (evt.pageX - offsetLeft) * bfaktor;
 }
 function getY(evt){
 return ((evt.pageY - (offsetTop * hfaktor)) + 130) * hfaktor;

 }
 
 //---------------------------------------------------------------------
 function init() {
 statusnode = document.getElementById("selectedobject");
 updateSelectedObject();
 getFaktor();
 window.addEventListener('resize',getFaktor,false);
 }
 .............
 
 }
 function setColor(col){
 color= col;
 }
 function mouse_down(evt){
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 painted_objs++;
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 edit = true;
 dobj = svgDocument.createElementNS(svgns, "rect");
 dobj.setAttributeNS(null,"x",getX(evt));
 dobj.setAttributeNS(null,"y",getY(evt));
 
 //js
 
 dobj.setAttributeNS(null,"onmousedown","mouse_down(evt);");
 dobj.setAttributeNS(null,"onmouseup","mouse_up(evt);");
 dobj.setAttributeNS(null,"onmousemove","mouse_move(evt);");
 //
 
 dobj.setAttributeNS(null,"id","obj"+painted_objs);
 dobj.setAttributeNS(null,"fill",color);
 document.getElementById('paintable').appendChild(dobj);

 }
 if(selectedDrawObject == 0) {
 edit = true;
 dobj = svgDocument.createElementNS(svgns, "line");
 //alert(2);
 dobj.setAttributeNS(null,"x1",getX(evt));
 dobj.setAttributeNS(null,"y1",getY(evt));
 dobj.setAttributeNS(null,"x2",getX(evt));
 dobj.setAttributeNS(null,"y2",getY(evt));
 
 dobj.setAttributeNS(null,"onmousedown","mouse_down(evt);");
 dobj.setAttributeNS(null,"onmouseup","mouse_up(evt);");
 dobj.setAttributeNS(null,"onmousemove","mouse_move(evt);");
 dobj.setAttributeNS(null,"id","obj"+painted_objs);
 dobj.setAttributeNS(null,"stroke",color);
 document.getElementById('paintable').appendChild(dobj);
 } 
 if(selectedDrawObject == 2) {
 edit = true;
 dobj = svgDocument.createElementNS(svgns, "ellipse");
 dobj.setAttributeNS(null,"cx",getX(evt));
 dobj.setAttributeNS(null,"cy",getY(evt));
 dobj.setAttributeNS(null,"rx","0");
 dobj.setAttributeNS(null,"ry","0");
 dobj.setAttributeNS(null,"onmousedown","mouse_down(evt);");
 dobj.setAttributeNS(null,"onmouseup","mouse_up(evt);");
 dobj.setAttributeNS(null,"onmousemove","mouse_move(evt);");
 dobj.setAttributeNS(null,"id","obj"+painted_objs);
 dobj.setAttributeNS(null,"fill",color);
 document.getElementById('paintable').appendChild(dobj);
 }
 if(selectedDrawObject == 1 || selectedDrawObject == 2 || selectedDrawObject ==0 ){
 anim = svgDocument.createElementNS(svgns, "animate");
 anim.setAttributeNS(null,"begin","del_all.click");
 anim.setAttributeNS(null,"attributeName","opacity");
 anim.setAttributeNS(null,"from","1");
 anim.setAttributeNS(null,"to","0");
 anim.setAttributeNS(null,"dur","2s");
 anim.setAttributeNS(null,"fill","freeze");
 anim.setAttributeNS(null,"onend","delete_all();");
 document.getElementById("obj"+painted_objs).appendChild(anim);
 if(blur == true){
 addBlurer();
 }
 }
 
 }
 ......................
 function mouse_up(evt){
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 dobj.setAttributeNS(null,"width",getX(evt)-parseInt(dobj.getAttribute('x')) );
 dobj.setAttributeNS(null,"height",getY(evt)-parseInt(dobj.getAttribute('y')));
 edit = false;
 }
 if(selectedDrawObject == 0) {
 dobj.setAttributeNS(null,"x2",getX(evt));
 dobj.setAttributeNS(null,"y2",getY(evt));
 edit = false;
 }
 if(selectedDrawObject == 2) {
 dobj.setAttributeNS(null,"rx",getX(evt)-parseInt(dobj.getAttribute('cx')));
 dobj.setAttributeNS(null,"ry",getY(evt)-parseInt(dobj.getAttribute('cy')));
 edit = false;
 }
 }
 
 function mouse_move(evt){
 if(edit == true) {
 if (window.svgDocument == null ){
 svgDocument = evt.target.ownerDocument;
 }
 if(selectedDrawObject == 1) {
 //alert("x/y: "+evt.clientX+"/"+evt.clientY);
 dobj.setAttributeNS(null,"width",getX(evt)-parseInt(dobj.getAttribute('x')));
 dobj.setAttributeNS(null,"height",getY(evt)-parseInt(dobj.getAttribute('y')));
 }
 if(selectedDrawObject == 0) {
 dobj.setAttributeNS(null,"x2",getX(evt));
 dobj.setAttributeNS(null,"y2",getY(evt));
 }
 if(selectedDrawObject == 2) {
 dobj.setAttributeNS(null,"rx",getX(evt)-parseInt(dobj.getAttribute('cx')));
 dobj.setAttributeNS(null,"ry",getY(evt)-parseInt(dobj.getAttribute('cy')));
 }
 }
 }
 
 // ]]>
 </script>
 <defs>
 <linearGradient id="headline" x1="0" y1="0" x2="1" y2="0">
 <stop offset="0" stop-color="#666666" />
 <stop offset="1" stop-color="white" />
 </linearGradient>
 <symbol id="sliderSymbol" overflow="visible">
 <line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="5" pointer-events="none"/>
 </symbol>
 </defs>
 <g id="all">
 <g font-family="Arial,Helvetica" >
 <text x="10" y ="35" font-size="30px" fill="#666666" >SVG-Painter</text>
 <text x="75" y ="50" font-size="10px" fill="#999999"></text>
 <rect x="0" y="60" width="1024" height="2" rx="5" ry="10" fill="url(#headline)" />
 </g>
 
 <g>
 <text x="10" y="100" fill="#666666" >Optionen:</text>
 <text id="selectedobject" x="200" y="100" fill="#666666">dfgfdgd</text>
 <text x="350" y="100" fill="#666666">Farbe:</text>
 <rect x="400" y="75" width="60" height="40" stroke="black" />
 
 <rect x="400" y="75" width="20" height="20" fill="blue" onclick="setColor('blue');"/>
 <rect x="400" y="95" width="20" height="20" fill="green" onclick="setColor('green');"/>
 <rect x="420" y="75" width="20" height="20" fill="yellow" onclick="setColor('yellow');"/>
 <rect x="420" y="95" width="20" height="20" fill="red" onclick="setColor('red');"/>
 <rect x="440" y="75" width="20" height="20" fill="white" onclick="setColor('white');"/>
 <rect x="440" y="95" width="20" height="20" fill="black" onclick="setColor('black');"/>
 
 <text x="480" y="100" fill="#666666">Rotieren</text>
 <g id="slider">
 
 </g>
 <text x="680" y="100" fill="#666666">Blur/Hover-Effekt</text>
 <rect id="blur" x="820" y="85" width="25" height="20" stroke="black" fill="white" onclick="if(blur){ blur=false;} else { blur=true;}">
 <set begin="click" attributeName="fill" from="white" to="black" onend="if(this.getAttribute('to') =='black') { this.setAttributeNS(null,'to','white');} else { this.setAttributeNS(null,'to','black'); } ;" /> 
 </rect>
 <text id="del_all" x="880" y="100" fill="#666666" >Alle Objekte loeschen</text>
 <g id="chooseObject">
 </g>
 </g>
 
 <g>
 <rect id="dropable" x="0" y="130" width="1024" height="638" fill="#CCCCCC" onmousedown="mouse_down(evt);" onmouseup="mouse_up(evt);" onmousemove="mouse_move(evt);"/>
 
 </g>
 <g id="paintable"> 
 </g>
 </g>
</svg>


    Das war meine Lösung die ich nu abgegeben habe, laaange nicht schick. Aber naja.
    Ich danke euch, die Bewertungen habt ihr beide (murduc und du) sicher ;-)
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.