Změna kurzoru v canvasu

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

Nefaritus

~ Redaktor

Posthunter

Kultivátor příspěvků ve starém fóru – 3.66 % z celku

12. 3. 2013 #1

Ahoj,

mám canvas a v něm vykreslené obdélníky (ne výšku přes celý canvas, na šířku už ne). Když na obdélník najedu, má se kurzor změnit na pointer, když najedu na horizontální kraje obdélníku, má se kurzor změnit na col-resize. Řeším to následujícím kódem (uvnitř události 'onmousemove' na canvasu).

for (var i = 0; i < myState.stripes.length; i++) {
  var stripe = myState.stripes[i];
  if (stripe.contains(mouse.x, mouse.y)) {
    if((mouse.x > stripe.offset) && (mouse.x < stripe.offset + 6)) {
      $('body').css('cursor','col-resize');
    } else if((mouse.x < (stripe.offset + stripe.width)) && (mouse.x > (stripe.offset + stripe.width - 6))) {
      $('body').css('cursor','col-resize');
    } else {
      $('body').css('cursor','pointer');
    }
  } else {
    $('body').css('cursor','default');
  }
}

Problém je ten, že ty kurzory se mění pouze na obdélníku, který je v poli (myState.stripes) poslední a na ostatních to nefunguje. Zkoušel jsem i vypisovat nějaký text po najetí na obdélník a to už fungovalo na všech, ale kurzor pořád jen na tom posledním. Nevidíte někdo, kde by mohl být problém? Díky.

Nahlásit jako SPAM

IP: 194.228.11.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

13. 3. 2013 #2

To by chtelo asi funkcni priklad. $('body') je nastaveni pro body tag, ne? Nejaky obdelnicek v canvasu by to nemelo resit.

Ja bych to resil tak, ze canvas bych pouzil jako graficke pozadi a pres to naplacal divy.

Nahlásit jako SPAM

IP: 2001:718:2601:400:0:5efe:...–

Nefaritus

~ Redaktor

Posthunter

13. 3. 2013 #3

#2 peter
To je jedno pro který element to použiješ, i když to dám vyloženě jen na canvas, tak je výsledek stejný. A to řešení funguje, ale jen na posledním objektu v poli, na těch ostatních ne, to mi vrtá hlavou proč.

Nahlásit jako SPAM

IP: 194.228.11.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

13. 3. 2013 #4

Ja bych ti rad poradil, ale bez spustitelneho kodu se mi vlastni vytvaret nechce. U jquery se pouziva each() pro prochazeni vsech prvku a pro zmenu vlastnosti bych pouzil zmenu className (js).

Nahlásit jako SPAM

IP: 2001:718:2601:400:0:5efe:...–

Nefaritus

~ Redaktor

Posthunter

3. 5. 2013 #5

Nejlepší odpověď

Bylo by od mě hezké poslat řešení, když už jsem to vyřešil :D Takže jde o to, že je potřeba ten cyklus breakovat a pak to jde v pohodě.

for (var i = 0; i < myState.stripes.length; i++) {
  var stripe = myState.stripes[i];
  if (stripe.contains(mouse.x, mouse.y)) {
    if((mouse.x > stripe.offset) && (mouse.x < stripe.offset + 6)) {
      $('body').css('cursor','col-resize'); break;
    } else if((mouse.x < (stripe.offset + stripe.width)) && (mouse.x > (stripe.offset + stripe.width - 6))) {
      $('body').css('cursor','col-resize'); break;
    } else {
      $('body').css('cursor','pointer'); break;
    }
  } else {
    $('body').css('cursor','default'); break;
  }
}

Nahlásit jako SPAM

IP: 212.4.138.–

← Zpět na seznam vláken ← Zpět do Fóra