Autor Zpráva
juraj
Profil
Zdravím
ako mám upraviť kód, aby sa obrázok správne otáčal za pohybom myšou?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">

  <title></title>
              <style>
              body{
                margin: 0px;
                padding: 0px;
                background-color: #E4E4ED;
                font-family: Arial, Helvetica, sans-serif;
              }
              #content{
                 width: 850px;
                 height: 400px;
                 margin: 0px auto;
                 margin-top:65px;
                 text-align: center;
               }
              #myCanvas{
                border: 2px solid #424163;
                margin: 0px auto;
              }
            </style>
            <script>
            
                     var canvas;
                     var context;
                     var WIDTH=850;
                     var  HEIGHT=400;
                     var backgroundImage;
                     var targetX=0;
                    var targetY=0;
 var img;
 var centerx=0; var centery=0; var degree=0; var radians=0;
 var mouse_x=0; var mouse_x=0;
 
  
    
     function moveTarget(e) {

      e = e || window.event;

          targetX = e.pageX-this.offsetLeft;
      targetY = e.pageY -this.offsetTop;
     
     
                center_x = this.offsetLeft + (img.width/2); 
       center_y = this.offsetTop + (img.height/2);
       
           mouse_x =e.pageX;//e.pageX
          mouse_y = e.pageY;
          
    
   
           radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        degree = (radians * (180 / Math.PI) * -1) + 90;
    

        
}
   
        

                
                                  function startgame() {
    init();

}


                    window.onload = function(){
                        init();
                    }
                    
                        function init(){
                                 //canvas element
                        canvas = document.getElementById("myCanvas");
                        context = canvas.getContext('2d');


                      
         img = new Image();
                  img.src = 'sipka.png';
                
    setInterval(loop, 10); //loop intervall-call, every 10 ms
      canvas.addEventListener("mousemove",moveTarget, false);  
                     
                        }

   function loop() {
    context.clearRect(0, 0, WIDTH,HEIGHT);
     
   
        
        
                   context.save();
                   context.clearRect(0,0,WIDTH,HEIGHT);
          context.translate(WIDTH/2,HEIGHT/2);
        context.rotate(degree);    

      context.drawImage(img,10,10,30,37);  

       context.restore();
           context.font = '16px Verdana';
    context.fillStyle = '#000';
    context.fillText('stupne'+degree ,100,200);
        context.fillText('Y'+targetY ,100,220);
}
                                         
                  </script>
  </head>
  <body>
         
            <canvas id="myCanvas" width="850" height="400"></canvas>
           
  </body>
</html>
juraj
Profil
Nikto nič nevie poradiť?Prosím?
Chamurappi
Profil
Reaguji na juraje:
Nikdo nemá chuť sestavovat si z tvého kódu vlastní pokusnou stránku, aby mohl diagnostikovat problém. To je hlavní důvod, proč je tu ticho. Dodej odkaz na živou ukázku a řešení budeš mít za pár minut či hodin.

V Exploreru 9 tvá stránka nebude vůbec fungovat kvůli quirku.
juraj
Profil
Chamurappi:
Zrdavím už som urobil živú ukážku davam link
tu
1Pupik1989
Profil
Řádek 50 a 51: Ty nepotřebuješ najít prostředek obrázku, nýbrž prostředek canvasu.
Řádek 59: Tak trochu nechápu. Proč ne třeba tak?
degree = radians * 180 / Math.PI + 180
Rozmezí Math.atan2 je [-PI,+PI] v radiánech čili -[180,+180] ve stupních.

Řádek 89: proč ne onmousemove?
Řádek 100: Ten tam je zbytečně navíc
Řádek 102: Metoda rotate u canvasu musí mít první parametr v radiánech.
juraj
Profil
1Pupik1989:
riadok 50,51
sred canvasu sa urcuje takto?
                center_x = this.offsetLeft + (WIDTH/2); 
       center_y = this.offsetTop + (HEIGHT/2);
       namiesto 
       
                center_x = this.offsetLeft + (img.width/2); 
       center_y = this.offsetTop + (img.height/2);
       
       
ak upravím riadok 102 nebude sa vobec otáčať
        context.rotate( radians);
ak dám onmousemove tiež sa šípka nebude otáčať
ďakujem za rady
Chamurappi
Profil
Reaguji na juraje:
som urobil živú ukážku
Neopravil jsi ten vykreslovací režim v Exploreru.

ak upravím riadok 102 nebude sa vobec otáčať
Tak děláš někde chybu, do rotate se opravdu nedává hodnota ve stupních.

ak dám onmousemove tiež sa šípka nebude otáčať
A píšeš to správně, nebo jsi v životě neviděl, jak se nastavují události, a jen jsi vyměnil řetězec mousemove za onmousemove?
1Pupik1989
Profil
juraj: Zapomněl jsem dodat, že máš ještě chybku v Math.atan2. Mrkni se na dokumentaci. Přímo se zaměř na parametry.
juraj
Profil
ak vám kód funguje,mozete tu hodiť opravený zdroják?ďakujem
1Pupik1989
Profil
Vždyť už ho skoro opravené máš. Jen uprav ten atan2. Ten střed máš dobře. Ještě by to šlo pomocí offsetX a offsetY místo pageX a pageY. Musel by si ale dořešit kompatibilitu.
juraj
Profil
skúšal som aj tak to a výsledok ten istý
   var  dx=mouse_x - center_x;
   var dy= mouse_y - center_y;
               // radians = Math.atan2( center_x-mouse_x ,center_y  -mouse_y );
          radians = Math.atan2(dx,dy);
   
    degree = radians * 180 / Math.PI + 180;
aj premenné som prehodil
1Pupik1989
Profil
Ale špatně.

Math.atan2(y, x) 
juraj
Profil
Dal som aj takto,výsledok ten istý.
var dx=0; var dy=0;
dx=mouse_x - center_x;
 dy= mouse_y - center_y;
               
          radians = Math.atan2(dy,dx) ;
1Pupik1989
Profil
Nahoď živou ukázku.
juraj
Profil
živá ukážka
tu
1Pupik1989
Profil
Vždyť to funguje. Do metody rotate akorát přidej 90°, což je Math.PI/2.
juraj
Profil
takto
        context.rotate(Math.PI/2+radians);
juraj
Profil
1Pupik1989
a teraz mám ako upraviť,aby kurzor sa nachádzal pred šipkou?
živá ukážka
tu
1Pupik1989
Profil
Však to mělo být to + 90°. Vezmi si, že 0 radiánů je vpravo. Respektive kolmice k pravé straně canvasu. Ty máš šipku nahoru a potřebuješ jí i těch 90° doprava otočit. To je to PI/2. PI je vlastně 180°. Proto PI/180 je jeden stupeň.

Když do rotate přidáš těch 90 stupňů, tak bude ukazovat na kurzor.

Důležitá je při tom jedna věc. Musíš si uvědomit, že s obrázkem se nic nestane, ten je pořád stejný. Otáčí se celý canvas.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Ty máš šipku nahoru a potřebuješ jí i těch 90° doprava otočit.
Nebo může upravit obrázek šipky, otočit si ji v grafickém editoru.

Otáčí se celý canvas.
Raději bych řekl, že se otáčí jeho souřadný systém, respektive 2D kontext. Sám <canvas> je vzhledem k okolí nehybný, ani na pozici kurzoru v něm nemá rotace vliv.


Reaguji na juraje:
Ukázka ti stále nefunguje v Exploreru 9 kvůli režimu…
1Pupik1989
Profil
Chanurappi: Máš pravdu. Lépe řečeno transformuje se jeho matice.

On ten režim zatím není podstatný, dokud to nedá dohromady. Zjevně to na Internet Exploreru netestuje.
juraj
Profil
živá ukážka
tu
zmenil som kód
        context.rotate(Math.PI/2+radians);
ale efekt otáčania šipky,nie je stále taký ako si predstavujem
niekde som čítal, že exploreri html5 nie je podporovaná,chcem vyriešiť ten môj problém,ale aj tak ďakujem za rady
1Pupik1989
Profil
My ale netušíme jaký efekt jsi si představoval. Mě to fungovalo normálně, akorát jsem ten obrázek vycentroval.
juraj
Profil
Pripájam link tu,kde si predstavujem,aby hrot šipky sledoval,kurzor myši pri pohybe,asi tak nejako

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: