Re: Javasscript event handling upon objects.

Newsgroups	comp.lang.javascript
Date	2016-02-24 01:34 -0800
References	<54796993-a97d-4a7b-abfe-868c1cd210fa@googlegroups.com> <69589233-ee75-4370-afea-0a89f2e0e8a2@googlegroups.com> <e66f8626-06f0-4ae3-9cf6-c55374f44f5f@googlegroups.com> <5b943729-226c-4aef-81de-80b75941531a@googlegroups.com>
Message-ID	<8d50e4bc-d7d2-4f23-98ba-8e8fb427fe1d@googlegroups.com> (permalink)
Subject	Re: Javasscript event handling upon objects.
From	jonas.thornvall@gmail.com

Show all headers | View raw

Den onsdag 24 februari 2016 kl. 10:33:30 UTC+1 skrev jonas.t...@gmail.com:
> Den onsdag 24 februari 2016 kl. 04:02:49 UTC+1 skrev Michael Haufe (TNO):
> > On Monday, February 22, 2016 at 8:10:46 AM UTC-6, jonas.t...@gmail.com wrote:
> > > Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev jonas.t...@gmail.com:
> > > > Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> > > 
> > > If i create x,y,width,height objects in an array that i will print out as canvas rectangle.
> > > 
> > > Must i really check every array element, if the mouse click event cordinates are within the boundaries of x,y,width,height?
> > 
> > If you insist on using a canvas, then yes. You have to implement your own Scene Graph and your own event management.
> > 
> > In order to implement event management you have to implement collision detection between your mouse event and the objects in your scene. 
> > 
> > You do so by capturing the 2-dimensional position + event of the mouse against the canvas element and then translate into your data structure representing the scene. Hopefully you are using something like a quad-tree[1] or similar.
> > 
> > [1] https://en.wikipedia.org/wiki/Quadtree
> > 
> > 
> > > I did see someone wrote about a SVG library pros and cons and is it hard to learn?
> > 
> > It will be easier than trying to implement/reinvent it yourself using canvas APIs. The latter is far more low level.
> 
> Well i did it not really but it work with rectangles, it have some minor quirks like it is not aware it is hold and not put on top. So basicly you can pick up  any number of elements and probably swap order of elements so you can bring them to front. But  picking them up, move them and relase them work.

<!DOCTYPE html>
<html>
<head>
    <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
<div id="container" style="width:10000px">
<div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
<table border="2" bgcolor="beige" width=190><tr>
<td bgcolor="green" align="middle">
<form name=Edoit onSubmit="initanime(); return false;">
<input type=submit name="init_anime" value="Anim"></form></td>
<td bgcolor="red" align="middle">
<form name=Fdoit onSubmit="stopanime(); return false;">
<input type=submit name="stop_anime" value="haltA">
</form></td></tr></table>
</div>
<div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
<canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
</div>
</body>
</html>

<script type="text/javascript">
// GLOBAL VARIABLES
arr=new Array();
var refresh = 5;
var timer = 5;


function RandomSQ(){
k=0;min=30;max=830;
MX=Math.floor(Math.random() * (max - min)) + min;
MY=Math.floor(Math.random() * (max - min)) + min;
arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
k++;

while(k<64){
 elements=arr.length;
  dodot=true;
  MX=Math.floor(Math.random() * (max - min)) + min;
  MY=Math.floor(Math.random() * (max - min)) + min;
  for(i=0;i<elements;i++){ 
     testx=Math.abs(arr[i].rposX-MX);
     testy=Math.abs(arr[i].rposY-MY);
     if (testx<40 && testy<40){dodot=false;} 
  }

 if (dodot==true){
         arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
         k++;
  }
}

}



// Create array
function Myarray()
{
i=0;j=0;k=0;
MX=50;MY=50;
while(j<8){

while(i<8){
arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
i++;k++;
MX=MX+80;
//MY=MY-7;
}
MX=50;
MY=MY+80;

i=0;
j++;
}

}

//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
        };
}

// Onload
function scriptload()
{
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
   initscript();
   listeners();
   startanime();
}

//Listenters logic
function listeners(){
myCanvas.addEventListener("mouseup", function(evt){
        mouseUp = getPosition(canvas, evt);
        message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
       }, false);
myCanvas.addEventListener("mousedown", function(evt){
        mouseDown = getPosition(canvas, evt);
        message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
       }, false);
myCanvas.addEventListener('mousemove', function(evt) {
       mousePos = getPosition(canvas, evt);
       message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
       }, false);
}



//Initiate values
function initscript()
{
hold=false;
message="";
mousePos = [0,0];
mouseDown = [0,0];
mouseUp=[0,0];
//Myarray();
RandomSQ();
SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
}

//Paint logic
function redraw()
{
           //Clear canvas
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           listener_logic();
           //Redraw canvas
           paint_out(canvas,message);
}

//How program behave on mouse click, drag, drop
function listener_logic(){

 for(t=0;t<64;t++){
if (mouseDown.x>=arr[t].rposX && mouseDown.x<=(arr[t].rposX+arr[t].rwidth) && mouseDown.y>=arr[t].rposY && mouseDown.y<=(arr[t].rposY+arr[t].rheigth)){
message = 'Got it:' + mousePos.x + ',' + mousePos.y;
arr[t].hold=true;

} else if (mouseUp.x>=arr[t].rposX && mouseUp.x<=(arr[t].rposX+arr[t].rwidth) && mouseUp.y>=arr[t].rposY && mouseUp.y<=(arr[t].rposY+arr[t].rheigth)){
message = 'Released it:' + mousePos.x + ',' + mousePos.y;
arr[t].hold=false;
}
}

}
//Paint out and redraw stuff on canvas
function paint_out(canvas, message)
{
  
   for(t=0;t<64;t++){
   if (arr[t].hold==true){arr[t].rposX=mousePos.x-10;arr[t].rposY=mousePos.y-10;  }
   }
   ctx.font = '18pt Calibri';
   ctx.fillStyle = 'black';
   ctx.fillText(message, 10, 25);
 
  for(t=0;t<64;t++){
   ctx.fillStyle = arr[t].rcolor;
  ctx.fillRect(arr[t].rposX, arr[t].rposY,arr[t].rwidth,arr[t].rheigth);
   }

}

//Start animation "form"
function startanime()
{
   refresh = setInterval(redraw, 150);

}

//Stop animation "form"
function stopanime()
{
   clearInterval(refresh);
}
</script>

Thread

Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 05:57 -0800
  Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 06:09 -0800
    Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:38 +0100
    Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-23 19:02 -0800
      Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:33 -0800
        Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:34 -0800
      Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-24 11:29 +0100
        Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:02 -0800
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:20 -0800
        Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-24 06:03 -0800
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 14:18 -0800
            Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 01:07 +0100
              Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 23:36 -0800
                Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 10:35 +0100
  Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:27 +0100
  Re: Javasscript event handling upon objects. Aleksandro <aleksandro@gmx.com> - 2016-02-22 12:11 -0300
    Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 07:37 -0800
      Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 16:47 +0100
        Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 10:29 -0800
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:23 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:34 -0800
              Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 23:05 +0100

csiph-web