Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #32721

Re: Area select tool

Newsgroups comp.lang.javascript
Date 2017-03-11 03:34 -0800
References <c9e3aac9-58cb-465a-9c64-bdae3c3d90ee@googlegroups.com> <cf1f54e8-cef8-408f-9641-da306574b179@googlegroups.com>
Message-ID <74ede9fc-6fd2-4996-8d9d-422eb042d433@googlegroups.com> (permalink)
Subject Re: Area select tool
From jonas.thornvall@gmail.com

Show all headers | View raw


Den lördag 11 mars 2017 kl. 12:07:01 UTC+1 skrev jonas.t...@gmail.com:
> Den lördag 11 mars 2017 kl. 11:32:06 UTC+1 skrev jonas.t...@gmail.com:
> > I would like to mark an area with mouse a "rectangle", and at same draw it in realtime as it mark up the diagonal that create the selected area.
> > 
> > But i am really clueless about howto achieve it.
> > Here is my attempt it do not even manage to catch the mouseUp event, below it the relevant listener code.
> > 
> > function areaSelectNodes(){
> >  mouseUp.x=undefined;
> >  mouseUp.y=undefined;
> >  leftupcornerX=mouseDown.x;
> >  leftupcornerY=mouseDown.y;
> >  while(mouseUp.x && mouseUp.y==undefined){
> >   rightdowncornerX=mouseDown.x;
> >   rightdowncornerY=mouseDown.y;
> >   ctx.fillStyle = "yellow";
> >   ctx.fillRect(leftupcornerX,leftupcornerY,rightdowncornerX,rightdowncornerY);
> >   ctx.stroke();
> >  }
> >  //markNodes();
> > }
> > 
> > // Start listeners
> > function start_listeners()
> > {
> >    mousePos = [0, 0];
> >    mouseDown = [0, 0];
> >    mouseUp = [0, 0];
> >    canvas.addEventListener("mouseup", function(evt)
> >    {
> >       mouseUp = getPosition(canvas, evt);
> >       mouseup_logic();
> >    }
> >    , false);
> >    canvas.addEventListener("mousedown", function(evt)
> >    {
> >       mouseDown = getPosition(canvas, evt);
> >       mousedown_logic();
> >    }
> >    , false);
> >    canvas.addEventListener('mousemove', function(evt)
> >    {
> >       mousePos = getPosition(canvas, evt);
> >    }
> >    , false);
> > }
> > 
> > // Get X, Y cordinates mouse position
> > function getPosition(canvas, evt) {
> >     var rect = canvas.getBoundingClientRect();
> >     return {
> >         x: evt.clientX - rect.left,
> >         y: evt.clientY - rect.top
> >     };
> > }
> > 
> > // How program behave on mouse click, drag, drop
> > function mousedown_logic() {
> > if (document.getElementById('areaselect').checked) {
> >         message2 = "AREA SELECT NODES"
> >         areaSelectNodes();
> >     }
> > }
> > 
> > function mouseup_logic() {
> >   
> > }
> 
> I thought the eventlistener had priority over the loop working with interupts?
> I mean when i relase the mouse mouseUp no longer undefined is there a reason the loop does not exit?

Solved

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread


Thread

Area select tool jonas.thornvall@gmail.com - 2017-03-11 02:31 -0800
  Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 03:06 -0800
    Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 03:34 -0800
      Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 04:46 -0800
        Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 07:03 -0800
          Re: Area select tool Luuk <luuk@invalid.lan> - 2017-03-11 16:44 +0100
            Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 07:49 -0800
              Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 09:23 -0800
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 10:39 -0800
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 10:46 -0800
                Re: Area select tool John G Harris <niam@jghnorth.org.uk.invalid> - 2017-03-11 20:14 +0000
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 13:07 -0800
                Re: Area select tool "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-03-11 22:19 +0100
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 13:34 -0800
                Re: Area select tool "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-03-11 23:07 +0100
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-11 21:12 -0800
                Re: Area select tool "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-03-12 09:58 +0100
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-12 05:04 -0700
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-12 05:05 -0700
                Re: Area select tool jonas.thornvall@gmail.com - 2017-03-12 13:46 -0700
  Re: Area select tool Silvio <silvio@internet.com> - 2017-03-13 22:39 +0100
    Re: Area select tool jonas.thornvall@gmail.com - 2017-03-13 23:52 -0700
      Re: Area select tool jonas.thornvall@gmail.com - 2017-03-14 00:35 -0700

csiph-web