canvas - KineticJS - Use of coordinates while drawing shape -
i want use kineticjs draw set of complex shapes in grid. shapes 80 wide , 150 high. when draw them, there gap between shapes width/height of shapes - expected them butted against each other in tight grid, not separated.
it looks somehow i'm drawing each shape @ twice x/y should be.
i've simplified problem attached code. shape complex, keep code simple i've replaced shapes rectangles (i know use rect object draw rectangles).
when run code see 8 rectangles separated both horizontally , vertically; clear, want each of rectangles tightly butted against each other.
i'm using constants width , height both draw rectangles in function drawfunc, , position rectangles (in code xpos = ((cols -1) * width) have thought tight against each other.
the code pretty simple. loop through rows , cols, create drawfunc shape, use width/height in drawing, , position shape according row/col using same width/height. should tight against each other, not separated.
confused.
<!doctype html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> <script src="http://www.kineticjs.com/download/kinetic-v3.9.8.js"></script> <script> window.onload = drawkineticgrid; function drawkineticgrid() { var width = 80; var height = 150; var stage = new kinetic.stage({ container : "container", width : 800, height : 600 }); var layer = new kinetic.layer(); var messagelayer = new kinetic.layer(); (rows = 1; rows <= 2; rows++) { (cols = 1; cols <= 4; cols++) { var arect = new kinetic.shape({ name : "" + rows + ":" + cols, drawfunc : function() { var context = this.getcontext(); context.beginpath(); // make simple shape - actual shape more complex, i'm // writing rectangle here keep code simple - know use // kineticjs rect class here instead. context.moveto(this.getx(), this.gety()); context.lineto(this.getx() + width, this.gety()); context.lineto(this.getx() + width, this.gety() + height); context.lineto(this.getx(), this.gety() + height); context.lineto(this.getx(), this.gety()); context.linewidth = 2; context.stroke(); this.fill(); this.stroke(); // draw x , y, row , col values in rectangle context.filltext("x,y : " + this.getx() + ", " + this.gety(), this.getx() + 5, this.gety() + 15); context.filltext("row, col : " + this.getname(), this.getx() + 5, this.gety() + 30); }, fill : "#ffffff", stroke : "green", strokewidth : 1 }); //add shape layer var xpos = ((cols - 1) * width); var ypos = ((rows - 1) * height); arect.setx(xpos); arect.sety(ypos); layer.add(arect); } } // add layer stage stage.add(layer); stage.add(messagelayer); }; </script> </head> <body> <div id="container"></div> </body> </html>
jaycee,
have in mind draw() method occurs after setx() method;
in first iteration, ok.
in second iteration, when setx(80), horizontal reference becomes 80px, fine.
afterward, call moveto(80, 0), stroke gets positioned in point(160, 0) ---> /80 + 80/
and on. try following:
<!doctype html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> <script src="http://www.kineticjs.com/download/kinetic-v3.9.8.js"></script> <script> window.onload = drawkineticgrid; function drawkineticgrid() { var width = 80; var height = 150; var stage = new kinetic.stage({ container : "container", width : 800, height : 600 }); var layer = new kinetic.layer(); var messagelayer = new kinetic.layer(); (rows = 1; rows <= 2; rows++) { (cols = 1; cols <= 4; cols++) { var arect = new kinetic.shape({ name : "" + rows + ":" + cols, drawfunc : function() { var context = this.getcontext(); context.beginpath(); // make simple shape - actual shape more complex, i'm // writing rectangle here keep code simple - know use // kineticjs rect class here instead. context.moveto(0, 0); context.lineto(width, 0); context.lineto(width, height); context.lineto(0, height); context.lineto(0, 0); context.linewidth = 2; context.stroke(); this.fill(); this.stroke(); // draw x , y, row , col values in rectangle context.filltext("x,y : " + this.getx() + ", " + this.gety(), 5, 15); context.filltext("row, col : " + this.getname(), 5, 30); }, fill : "#ffffff", stroke : "green", strokewidth : 1 }); //add shape layer var xpos = ((cols - 1) * width); var ypos = ((rows - 1) * height); arect.setx(xpos); arect.sety(ypos); layer.add(arect); } } // add layer stage stage.add(layer); stage.add(messagelayer); }; </script> </head> <body> <div id="container"></div> </body> </html> cheers!!
Comments
Post a Comment