KineticJs - Mriežka sa nezobrazuje na plátne - kineticjs

Súvisiace s predchádzajúcu otázku

Teraz som aktualizoval jsfiddle pridať mriežku iba počas počiatočného zaťaženia.

Niekoľko otázok súvisiacich s týmto: 1) Keď kliknem na "show grid", nezobrazí sa removeGrid() riadku z initStage sa zobrazí mriežka. Čo som vynechal - pretože som za predpokladu, že mriežka objekt, ktorý volám v showGrid sa líši od toho v removeGrid - aj keď vidím len to, že je vytvorený raz.

2) Pridal som aj tlačidlo „clear stage“, ktoré pri volaní vymaže javisko (funguje) ale nemôžem znova zobraziť mriežku. Zahrnula som make_grid(); po vyčistení javiska - ale nemá žiaden účinok. Predpokladám, že v dôsledku chyby uvedenej v (1)?

3) Ako môžem spustiť mriežku 20px zhora a zľava. V podstate chcem, aby sa mriežka nachádzala len v strede plátna - ponechávajúc 20px hranicu celú cestu.

Veľa ďakujeme za pomoc!

odpovede:

Pokiaľ ide o chybu removeGrid (), v súbore jsfiddle sa vyskytla jednoduchá chyba:

1. $d("body").on("click","#removeGrid",function(){ <- to bolo "#addGrid" v oboch obslužných programoch udalostí

Tiež rieši prob 2. aktualizované husle http://jsfiddle.net/aplus1/37Z4P/20/

Pre vaše prob 3: skontrolujte toto husle - http://jsfiddle.net/aplus1/37Z4P/21/

a tu je príslušný kód, ktorý bol zmenený:

for (i = 0; i < (stage.getWidth()-40)/CELL_SIZE + 1; i++) {
var I = i * CELL_SIZE + 20;
var l = new Kinetic.Line({
stroke: "black",
points: [I, 20, I, stage.getHeight()-20]
});
grid.add(l);
}

for (j = 0; j < (stage.getHeight()-40)/CELL_SIZE + 1; j++) {
var J = j * CELL_SIZE + 20;
var l2 = new Kinetic.Line({
stroke: "black",
points: [20, J, stage.getWidth()-20, J]
});
grid.add(l2);
}

To, čo sa tu deje, je nasledovné: Znížil som vašu slučku tak, že ide z 20px na šírku-20px, kompenzuje vaše koncové body o 20px vľavo / hore a zníži o 40px z widht / height na získanie druhého koncového bodu

Dajte mi vedieť, ak máte nejaké otázky.