| 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> |
||
|
Časová prodleva: 3 dny
|
|||
| juraj Profil |
#2 · Zasláno: 4. 2. 2014, 23:17:55
Nikto nič nevie poradiť?Prosím?
|
||
| Chamurappi Profil |
#3 · Zasláno: 4. 2. 2014, 23:47:28
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 |
|||
| 1Pupik1989 Profil |
#5 · Zasláno: 5. 2. 2014, 13:24:25
Řá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 Řá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);
context.rotate( radians); ďakujem za rady |
||
| Chamurappi Profil |
#7 · Zasláno: 5. 2. 2014, 14:06:32
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 |
#8 · Zasláno: 5. 2. 2014, 14:20:10
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 |
#9 · Zasláno: 5. 2. 2014, 14:41:00
ak vám kód funguje,mozete tu hodiť opravený zdroják?ďakujem
|
||
| 1Pupik1989 Profil |
#10 · Zasláno: 5. 2. 2014, 15:33:37
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 |
#11 · Zasláno: 5. 2. 2014, 16:21:21
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; |
||
| 1Pupik1989 Profil |
#12 · Zasláno: 5. 2. 2014, 16:42:38
Ale špatně.
Math.atan2(y, x) |
||
| juraj Profil |
#13 · Zasláno: 5. 2. 2014, 17:47:04
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 |
#14 · Zasláno: 5. 2. 2014, 18:05:04
Nahoď živou ukázku.
|
||
| juraj Profil |
#15 · Zasláno: 5. 2. 2014, 18:13:01
živá ukážka
tu |
||
| 1Pupik1989 Profil |
#16 · Zasláno: 5. 2. 2014, 18:24:51
Vždyť to funguje. Do metody rotate akorát přidej 90°, což je Math.PI/2.
|
||
| juraj Profil |
#17 · Zasláno: 5. 2. 2014, 18:29:50
takto
context.rotate(Math.PI/2+radians); |
||
| juraj Profil |
#18 · Zasláno: 5. 2. 2014, 19:35:06
|
||
| 1Pupik1989 Profil |
#19 · Zasláno: 5. 2. 2014, 22:32:08
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 |
#21 · Zasláno: 6. 2. 2014, 02:07:38
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 |
#22 · Zasláno: 6. 2. 2014, 09:49:32
živá ukážka
tu zmenil som kód context.rotate(Math.PI/2+radians); 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 |
#23 · Zasláno: 6. 2. 2014, 12:07:17
My ale netušíme jaký efekt jsi si představoval. Mě to fungovalo normálně, akorát jsem ten obrázek vycentroval.
|
||
| juraj Profil |
#24 · Zasláno: 6. 2. 2014, 13:49:09
Pripájam link tu,kde si predstavujem,aby hrot šipky sledoval,kurzor myši pri pohybe,asi tak nejako
|
||
|
Časová prodleva: 10 let
|
|||
0