Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #32730
| Newsgroups | comp.lang.javascript |
|---|---|
| Date | 2017-03-11 10:46 -0800 |
| References | (4 earlier) <28db8eec-f301-4cd2-bdb2-530ae0521344@googlegroups.com> <58c41b03$0$695$e4fe514c@news.xs4all.nl> <3b8315a8-ad5c-4e5c-85b7-2d840881cd4d@googlegroups.com> <4eed9082-6ed3-46e6-9a2f-f3d4990ecd3b@googlegroups.com> <fd436478-b3e0-4219-8fa5-d6ae88f37aba@googlegroups.com> |
| Message-ID | <b0435e81-4773-45eb-aee9-0dbc60ccfdc4@googlegroups.com> (permalink) |
| Subject | Re: Area select tool |
| From | jonas.thornvall@gmail.com |
Den lördag 11 mars 2017 kl. 19:39:25 UTC+1 skrev jonas.t...@gmail.com:
> Den lördag 11 mars 2017 kl. 18:23:30 UTC+1 skrev jonas.t...@gmail.com:
> > Den lördag 11 mars 2017 kl. 16:49:58 UTC+1 skrev jonas.t...@gmail.com:
> > > Den lördag 11 mars 2017 kl. 16:43:03 UTC+1 skrev Luuk:
> > > > On 11-03-17 16:03, jonas.thornvall@gmail.com wrote:
> > > > > Den lördag 11 mars 2017 kl. 13:46:19 UTC+1 skrev jonas.t...@gmail.com:
> > > > >> Den lördag 11 mars 2017 kl. 12:34:24 UTC+1 skrev jonas.t...@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
> > > > >>
> > > > >> http://anybase.co.nf
> > > > >
> > > > > Maybe someone feel the imminent urge to construct the code to check which nodes inside the marked area, but i guess i have to to it myself ;)
> > > > >
> > > >
> > > > I just asked meself what you wanted to do with this piece of code ... ;)
> > >
> > > I am almost there but..... It doesn't work apparently i look at wrong area, but it seem right but cordinates can be confusing.
> > >
> > > It was easier in Pascal and Java, nah it wasn't.
> > >
> > > function areaMark() {
> > > alert("ute");
> > > markindex = 0;
> > > for (var t = 0; t < arr.length; t++) {
> > > if (leftupcornerX <= arr[t].rposX && rightdowncornerX >= (arr[t].rposX + arr[t].rwidth) && leftupcornerY <= arr[t].rposY && leftdowncornerY >= (arr[t].rposY + arr[t].rheigth)) {
> > > alert("inne");
> > > marklist[markindex] = t;
> > > markindex++;
> > > }
> > > }
> > > }
> >
> > Done
> > http://anybase.co.nf
> > function areaMark() {
> > markindex = marklist.length;
> > for (var t = 0; t < arr.length; t++) {
> > if (leftupcornerX <= arr[t].rposX && leftupcornerX+rightdowncornerX >= (arr[t].rposX + arr[t].rwidth) && leftupcornerY <= arr[t].rposY && leftupcornerY+rightdowncornerY >= (arr[t].rposY + arr[t].rheigth)) {
> > var index = marklist.indexOf(t);
> > if (index === -1) {
> > mark(t);
> > } else {
> > unmark(t,index)
> > }
> > }
> > }
> > autotext = "Marked=" + marklist + "\n";
> > update_GraphData();
> > }
>
> Maybe someone feel the imminent urge to help out with the bug in the code to remove links, but i guess i have to to it myself ;)
>
> After that there is actually a rudimentary editor working, but copy, cut and paste would be nice.
And reshape, move and enlarge/shrink
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