Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #32721
| 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 |
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
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