How to Calculate Center pixels(x,y) of each small square drwan within a rectangle in HTML5 canvas -

-

i have written code create rectangle , providing values generate rows , columns in rectangle,basically creating small squares within rectangle.

code can seen here http://jsfiddle.net/simerpreet/ndge5/1/

<h1>example</h1> <canvas id="t_canvas" style="border:1px solid #000000;" width="300" height="225"></canvas> <br/> <button id="draw">draw</button>          <script> var x=50;     var y=50;     var w = 150; //width     var h = 100; //height     var columns=3;     var rows =3;     var vnp =w/columns; //vertical next point     var hnp=h/rows;  //horizontal next point     var canvas  = document.getelementbyid("t_canvas");     var ctx = canvas.getcontext("2d"); $(document).ready(function() {      $('#draw').click(function() {      drawverticallines(parsefloat(vnp));      drawhorizontallines(parsefloat(hnp));      ctx.fillstyle = "#ff0000";      ctx.strokerect(x, y, w, h);      ctx.stroke();     }); });  function drawverticallines(np){         var np = x + np //start point of first column          while(np < w+x){             ctx.moveto(np, y);             ctx.lineto(np, y+h);             np = vnp + np;         }      }   function drawhorizontallines(np){         var np = y + np //start point of first column         while(np < h+y){             ctx.moveto(x, np);             ctx.lineto(x+w, np);             np = hnp + np;         }     }  <script>

i have given value of rows =3 , columns =3, create tic tac toe squares.my requirement when click in small square @ postion,it should give me exact center location of particular square, iam kind of stuck here,is there kind of algorithm can this?

thanks, simer

the correct way center point can manifested in various ways in essence need do:

 var mousepos = getmousepos(canvas, evt),  // adjusted mouse position      gw = vnp * 0.5,                       // center of 1 cell      gh = hnp * 0.5,      ix = ((mousepos.x - x) / vnp)|0,      // cell index clicked      iy = ((mousepos.y - y) / hnp)|0,      cx = ix * vnp + x + gw,               // scale pixel position      cy = iy * hnp + y + gh;

modified fiddle here

a quick breakdown of following lines (showing x, same y):

ix = ((mousepos.x - x) / vnp)|0 cx = ix * vnp + x + gw

  1. adjust grid subtracting grid's start point mouse position. gives position within grid:

    mousepos.x - x

  2. quantize value index using single cell's width. |0 cuts off fractional value end integer value need next step:

    ((mousepos.x - x) / vnp)|0

  3. now have integer index [0, 2] (you need boundary checks or index range check grid) multiply cell width pixel position start of grid cell:

    cx = ix * vnp

  4. and add grid start position of grid cell's on-screen corner adding half cell size center of cell:

    cx = ix * vnp + gw

a bonus have indexes (ix , iy) can use array more easy check game status.


Comments

Post a Comment

Popular posts from this blog

c# - Unity IoC Lifetime per HttpRequest for UserStore -

-
i'm trying clean default implementation of accountcontroller.cs comes out of box in new mvc5/owin security implementation. have modified constructor this: private usermanager<applicationuser> usermanager; public accountcontroller(usermanager<applicationuser> usermanager) { this.usermanager = usermanager; } also, have created lifetime manager unity looks this: public class httpcontextlifetimemanager<t> : lifetimemanager, idisposable { private httpcontextbase _context = null; public httpcontextlifetimemanager() { _context = new httpcontextwrapper(httpcontext.current); } public httpcontextlifetimemanager(httpcontextbase context) { if (context == null) throw new argumentnullexception("context"); _context = context; } public void dispose() { this.removevalue(); } public override object get...
Read more

Change the color of an oval at click in Java AWT -

-
i have draw ovals in java, , @ click change color. beginning tried change color after 20 ms, doesn't work. my code is: public class mycomponentnew extends frame { public graphics2d g2d; public mycomponentnew(string title) { super(title); setsize(400, 550); } @override public void paint(graphics g) { this.g2d = (graphics2d) g; this.g2d.setcolor(color.red); this.g2d.filloval(10, 55, 50, 100); } public void changecolor () { this.g2d.setcolor(color.blue); this.g2d.filloval(10, 55, 50, 100); } } and in class main method have: mycomponentnew m; m = new mycomponentnew("fereastra cu baloane"); m.setvisible(true); m.addwindowlistener(new windowadapter() { @override public void windowclosing(windowevent we) { system.exit(0); } }); try { thread.sleep(20); } catch(interruptedexception e) {} m.changecolor(); the color of oval remains red. ...
Read more

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -

-
i writing program in fortran find velocity of parachuting person in relation time. keep getting error can't fix. new programming , appreciated. the error is v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) 1 error: incompatible ranks 0 , 1 in assignment @ (1) and program is program para integer :: real :: v(11) !velocity real :: q !initial velocity real :: h !time step real :: c !drag coefficient real :: m !mass ! gravity equal 32 ft/s^2 write (*,*)'enter time step' read(*,*)h write(*,*)'enter initial velocity' read(*,*)q write(*,*)'enter drag coefficient' read(*,*)c write(*,*)'enter mass' read(*,*)m i=1,10 ! 1 10, 1 being interval. end v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) q=v(1) end program you cannot use [] normal parenthesis in expressions. array constructor, [ items ] means array items elements. end do should after line.
Read more