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

Groups > comp.lang.javascript > #32482 > unrolled thread

Find element/object below mouse

Back to article view | Back to comp.lang.javascript

Contents

  Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-05 21:29 -0800
    Re: Find element/object below mouse JJ <jj4public@vfemail.net> - 2017-02-06 20:03 +0700
      Re: Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-06 08:30 -0800
        Re: Find element/object below mouse Silvio <silvio@internet.com> - 2017-02-06 19:01 +0100
          Re: Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-06 11:20 -0800
            Re: Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-06 11:56 -0800
              Re: Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-06 11:59 -0800
            Re: Find element/object below mouse JJ <jj4public@vfemail.net> - 2017-02-07 22:35 +0700
              Re: Find element/object below mouse jonas.thornvall@gmail.com - 2017-02-07 07:46 -0800
      Re: Find element/object below mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-09 02:07 +0100

#32482 — Find element/object below mouse

I have an array with rectangle elements?/objects? painted on canvas, right now i do poll the full array comparing mouse position from eventhandler with the array elements. And determine if to move it by click and hold. 

So at every redraw i basicly do the check, because i do not know, the standard way to do it. 

http://anybase.co.nf/

The approach work but i wonder is there a more effective and a standardid way to do this in javascript?

The way i do it would be ineffective if there is thousands of objects, then it would be better to poll subareas of canvas, but then each arrayelement somehow need to know which area and span of cordinates it do belong to "set a property or attribute of the nodeobject. And you would have to check if the node have the property rather than they x,y cordinates, so i am not sure you even win that much. 

Because now i will also include mark, create and remove and translate copy/paste group array elements/objects to new position. So any necessary changes to the whole approach would be better todo before rather than after. 


// Paint logic
function redraw()
{
   // Clear canvas
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.fillStyle = mybgcolor;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
  // Redraw canvas
   paint_out(arr);
}

// Paint out and redraw stuff on canvas
function paint_out(arr)
{
   for(t = 0; t < nodes; t ++ )
   {
      if (arr[t].hold == true)
      {
         arr[t].rposX = mousePos.x - 10;
         arr[t].rposY = mousePos.y - 10;
      }
   }
  
   ctx.font = '35px Arial';
   ctx.fillStyle = txtcolor;
   ctx.fillText(message2, 10, 65);
   ctx.font = '18px Calibri';
   ctx.fillStyle = mytxtcolor;
   ctx.fillText(message, 10,15);
   ctx.fillText(message1, 10,35);
   for(t = 0; t < nodes; t ++ )
   {
      for(s = 0; s < arr[t].nodelinks.length; s ++ )
      {
         myvar = arr[t].nodelinks[s];
         ctx.beginPath();
         ctx.moveTo(arr[t].rposX, arr[t].rposY);
         ctx.lineTo(arr[myvar].rposX, arr[myvar].rposY);
         ctx.stroke();
      }
      ctx.fillStyle = arr[t].bcolor;
      ctx.fillRect(arr[t].rposX, arr[t].rposY, arr[t].rwidth, arr[t].rheigth);
      ctx.strokeStyle = arr[t].bcolor;
      ctx.lineWidth = 1;
      ctx.strokeRect(arr[t].rposX, arr[t].rposY, arr[t].rwidth,     arr[t].rheigth);
      ctx.fillStyle = mytxtcolor;
      ctx.fillText(t, arr[t].rposX, arr[t].rposY);
   }
}

[toc] | [next] | [standalone]

#32492

On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
> I have an array with rectangle elements?/objects? painted on canvas, right
> now i do poll the full array comparing mouse position from eventhandler
> with the array elements. And determine if to move it by click and hold. 
> 
> So at every redraw i basicly do the check, because i do not know, the
> standard way to do it. 
> 
> http://anybase.co.nf/ 
> 
> The approach work but i wonder is there a more effective and a standardid
> way to do this in javascript? 
> 
> The way i do it would be ineffective if there is thousands of objects,
> then it would be better to poll subareas of canvas, but then each
> arrayelement somehow need to know which area and span of cordinates it do
> belong to "set a property or attribute of the nodeobject. And you would
> have to check if the node have the property rather than they x,y
> cordinates, so i am not sure you even win that much. 
> 
> Because now i will also include mark, create and remove and translate
> copy/paste group array elements/objects to new position. So any necessary
> changes to the whole approach would be better todo before rather than
> after. 

Your canvas "objects" is only in your script's mind. Canvas only sees
pixels. You'll have to do it manually for each canvas "object" you create
like any other games in any platform.

[toc] | [prev] | [next] | [standalone]

#32498

Den måndag 6 februari 2017 kl. 14:03:06 UTC+1 skrev JJ:
> On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
> > I have an array with rectangle elements?/objects? painted on canvas, right
> > now i do poll the full array comparing mouse position from eventhandler
> > with the array elements. And determine if to move it by click and hold. 
> > 
> > So at every redraw i basicly do the check, because i do not know, the
> > standard way to do it. 
> > 
> > http://anybase.co.nf/ 
> > 
> > The approach work but i wonder is there a more effective and a standardid
> > way to do this in javascript? 
> > 
> > The way i do it would be ineffective if there is thousands of objects,
> > then it would be better to poll subareas of canvas, but then each
> > arrayelement somehow need to know which area and span of cordinates it do
> > belong to "set a property or attribute of the nodeobject. And you would
> > have to check if the node have the property rather than they x,y
> > cordinates, so i am not sure you even win that much. 
> > 
> > Because now i will also include mark, create and remove and translate
> > copy/paste group array elements/objects to new position. So any necessary
> > changes to the whole approach would be better todo before rather than
> > after. 
> 
> Your canvas "objects" is only in your script's mind. Canvas only sees
> pixels. You'll have to do it manually for each canvas "object" you create
> like any other games in any platform.

Ok then my approach seem sound.
Thanks

[toc] | [prev] | [next] | [standalone]

#32500

On 02/06/2017 05:30 PM, jonas.thornvall@gmail.com wrote:
> Den måndag 6 februari 2017 kl. 14:03:06 UTC+1 skrev JJ:
>> On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
>>> I have an array with rectangle elements?/objects? painted on canvas, right
>>> now i do poll the full array comparing mouse position from eventhandler
>>> with the array elements. And determine if to move it by click and hold.
>>>
>>> So at every redraw i basicly do the check, because i do not know, the
>>> standard way to do it.
>>>
>>> http://anybase.co.nf/
>>>
>>> The approach work but i wonder is there a more effective and a standardid
>>> way to do this in javascript?
>>>
>>> The way i do it would be ineffective if there is thousands of objects,
>>> then it would be better to poll subareas of canvas, but then each
>>> arrayelement somehow need to know which area and span of cordinates it do
>>> belong to "set a property or attribute of the nodeobject. And you would
>>> have to check if the node have the property rather than they x,y
>>> cordinates, so i am not sure you even win that much.
>>>
>>> Because now i will also include mark, create and remove and translate
>>> copy/paste group array elements/objects to new position. So any necessary
>>> changes to the whole approach would be better todo before rather than
>>> after.
>>
>> Your canvas "objects" is only in your script's mind. Canvas only sees
>> pixels. You'll have to do it manually for each canvas "object" you create
>> like any other games in any platform.
>
> Ok then my approach seem sound.
> Thanks
>

It does not mean that you need to have a linear lookup, of course.

[toc] | [prev] | [next] | [standalone]

#32502

Den måndag 6 februari 2017 kl. 19:02:20 UTC+1 skrev Silvio:
> On 02/06/2017 05:30 PM, jonas.thornvall@gmail.com wrote:
> > Den måndag 6 februari 2017 kl. 14:03:06 UTC+1 skrev JJ:
> >> On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
> >>> I have an array with rectangle elements?/objects? painted on canvas, right
> >>> now i do poll the full array comparing mouse position from eventhandler
> >>> with the array elements. And determine if to move it by click and hold.
> >>>
> >>> So at every redraw i basicly do the check, because i do not know, the
> >>> standard way to do it.
> >>>
> >>> http://anybase.co.nf/
> >>>
> >>> The approach work but i wonder is there a more effective and a standardid
> >>> way to do this in javascript?
> >>>
> >>> The way i do it would be ineffective if there is thousands of objects,
> >>> then it would be better to poll subareas of canvas, but then each
> >>> arrayelement somehow need to know which area and span of cordinates it do
> >>> belong to "set a property or attribute of the nodeobject. And you would
> >>> have to check if the node have the property rather than they x,y
> >>> cordinates, so i am not sure you even win that much.
> >>>
> >>> Because now i will also include mark, create and remove and translate
> >>> copy/paste group array elements/objects to new position. So any necessary
> >>> changes to the whole approach would be better todo before rather than
> >>> after.
> >>
> >> Your canvas "objects" is only in your script's mind. Canvas only sees
> >> pixels. You'll have to do it manually for each canvas "object" you create
> >> like any other games in any platform.
> >
> > Ok then my approach seem sound.
> > Thanks
> >
> 
> It does not mean that you need to have a linear lookup, of course.

How could it otherwise be done? The mouse events is not aware about the rectangles? And the rectangles isn't aware about the mouse position?

[toc] | [prev] | [next] | [standalone]

#32504

Den måndag 6 februari 2017 kl. 20:20:22 UTC+1 skrev jonas.t...@gmail.com:
> Den måndag 6 februari 2017 kl. 19:02:20 UTC+1 skrev Silvio:
> > On 02/06/2017 05:30 PM, jonas.thornvall@gmail.com wrote:
> > > Den måndag 6 februari 2017 kl. 14:03:06 UTC+1 skrev JJ:
> > >> On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
> > >>> I have an array with rectangle elements?/objects? painted on canvas, right
> > >>> now i do poll the full array comparing mouse position from eventhandler
> > >>> with the array elements. And determine if to move it by click and hold.
> > >>>
> > >>> So at every redraw i basicly do the check, because i do not know, the
> > >>> standard way to do it.
> > >>>
> > >>> http://anybase.co.nf/
> > >>>
> > >>> The approach work but i wonder is there a more effective and a standardid
> > >>> way to do this in javascript?
> > >>>
> > >>> The way i do it would be ineffective if there is thousands of objects,
> > >>> then it would be better to poll subareas of canvas, but then each
> > >>> arrayelement somehow need to know which area and span of cordinates it do
> > >>> belong to "set a property or attribute of the nodeobject. And you would
> > >>> have to check if the node have the property rather than they x,y
> > >>> cordinates, so i am not sure you even win that much.
> > >>>
> > >>> Because now i will also include mark, create and remove and translate
> > >>> copy/paste group array elements/objects to new position. So any necessary
> > >>> changes to the whole approach would be better todo before rather than
> > >>> after.
> > >>
> > >> Your canvas "objects" is only in your script's mind. Canvas only sees
> > >> pixels. You'll have to do it manually for each canvas "object" you create
> > >> like any other games in any platform.
> > >
> > > Ok then my approach seem sound.
> > > Thanks
> > >
> > 
> > It does not mean that you need to have a linear lookup, of course.
> 
> How could it otherwise be done? The mouse events is not aware about the rectangles? And the rectangles isn't aware about the mouse position?

I do not think there would be less work to sort to nearest mouse node then to actually poll the full list?

For a short while i was thinking dividing canvas into subareas but i am not sure it is worth it? 

What approach did you have in mind, and can you explain in layman terms or give me a pointer to example on web?

[toc] | [prev] | [next] | [standalone]

#32505

Den måndag 6 februari 2017 kl. 20:56:36 UTC+1 skrev jonas.t...@gmail.com:
> Den måndag 6 februari 2017 kl. 20:20:22 UTC+1 skrev jonas.t...@gmail.com:
> > Den måndag 6 februari 2017 kl. 19:02:20 UTC+1 skrev Silvio:
> > > On 02/06/2017 05:30 PM, jonas.thornvall@gmail.com wrote:
> > > > Den måndag 6 februari 2017 kl. 14:03:06 UTC+1 skrev JJ:
> > > >> On Sun, 5 Feb 2017 21:29:17 -0800 (PST), jonas.thornvall@gmail.com wrote:
> > > >>> I have an array with rectangle elements?/objects? painted on canvas, right
> > > >>> now i do poll the full array comparing mouse position from eventhandler
> > > >>> with the array elements. And determine if to move it by click and hold.
> > > >>>
> > > >>> So at every redraw i basicly do the check, because i do not know, the
> > > >>> standard way to do it.
> > > >>>
> > > >>> http://anybase.co.nf/
> > > >>>
> > > >>> The approach work but i wonder is there a more effective and a standardid
> > > >>> way to do this in javascript?
> > > >>>
> > > >>> The way i do it would be ineffective if there is thousands of objects,
> > > >>> then it would be better to poll subareas of canvas, but then each
> > > >>> arrayelement somehow need to know which area and span of cordinates it do
> > > >>> belong to "set a property or attribute of the nodeobject. And you would
> > > >>> have to check if the node have the property rather than they x,y
> > > >>> cordinates, so i am not sure you even win that much.
> > > >>>
> > > >>> Because now i will also include mark, create and remove and translate
> > > >>> copy/paste group array elements/objects to new position. So any necessary
> > > >>> changes to the whole approach would be better todo before rather than
> > > >>> after.
> > > >>
> > > >> Your canvas "objects" is only in your script's mind. Canvas only sees
> > > >> pixels. You'll have to do it manually for each canvas "object" you create
> > > >> like any other games in any platform.
> > > >
> > > > Ok then my approach seem sound.
> > > > Thanks
> > > >
> > > 
> > > It does not mean that you need to have a linear lookup, of course.
> > 
> > How could it otherwise be done? The mouse events is not aware about the rectangles? And the rectangles isn't aware about the mouse position?
> 
> I do not think there would be less work to sort to nearest mouse node then to actually poll the full list?
> 
> For a short while i was thinking dividing canvas into subareas but i am not sure it is worth it? 
> 
> What approach did you have in mind, and can you explain in layman terms or give me a pointer to example on web?

If one do a sort it prbably would have to be done every 1/5 or 1/10 of second, would that really buy me something? I mean go through the array nodelist is linear time?

[toc] | [prev] | [next] | [standalone]

#32548

On Mon, 6 Feb 2017 11:20:18 -0800 (PST), jonas.thornvall@gmail.com wrote:
> 
> How could it otherwise be done? The mouse events is not aware about the
> rectangles? And the rectangles isn't aware about the mouse position?

You forgot that there's no spoon.

DOM isn't aware of any "object" on the canvas and vice versa.

Usually, you have an array of "object" area coordinates. The basic is that
you check the current mouse position against each "object" area. But you can
optimize the searching process if you index the array based on coordinates.

e.g. divide the canvas screen into 4 or 8 groups, and the index refers to
one of those group which also refers to another array which contains the
"objects" on that group of canvas screen.

If "objects" can overlap with each other on a different layer, use a layer
index, so the "object" search starts at the topmost layer then the lower
ones.

[toc] | [prev] | [next] | [standalone]

#32549

Den tisdag 7 februari 2017 kl. 16:35:46 UTC+1 skrev JJ:
> On Mon, 6 Feb 2017 11:20:18 -0800 (PST), jonas.thornvall@gmail.com wrote:
> > 
> > How could it otherwise be done? The mouse events is not aware about the
> > rectangles? And the rectangles isn't aware about the mouse position?
> 
> You forgot that there's no spoon.
> 
> DOM isn't aware of any "object" on the canvas and vice versa.
> 
> Usually, you have an array of "object" area coordinates. The basic is that
> you check the current mouse position against each "object" area. But you can
> optimize the searching process if you index the array based on coordinates.
> 
> e.g. divide the canvas screen into 4 or 8 groups, and the index refers to
> one of those group which also refers to another array which contains the
> "objects" on that group of canvas screen.
> 
> If "objects" can overlap with each other on a different layer, use a layer
> index, so the "object" search starts at the topmost layer then the lower
> ones.

Well that was one of the idea that come to my mind but i am not sure it is worth the effort mostly there is no more then 200 objects. And it seem responsive dependent upon number of edges/links. I guess i also would  have to store the actual subpart where the object reside with the object. And if you move it you would have to keep track but maybe that is no problem because the areas would need to be defined for the mouse too.

Well i will think about it, but if i do 3D mapping i definitely will use it.

[toc] | [prev] | [next] | [standalone]

#32569

JJ wrote:

> Your canvas "objects" is only in your script's mind. Canvas only sees
> pixels. You'll have to do it manually for each canvas "object" you create
> like any other games in any platform.

This is precisely the problem with Canvas.  In SVG, you do have the 
geometric shapes as DOM objects instead, and you can let the renderer do any 
calculations required to modify the shape; the only thing you have to tell 
it is which shape you want.  Also, there is no standard that you can even 
remotely rely on, while SVG is a Web standard.  I regard Canvas as a 
technique inferior to SVG.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web