Silvio
2/22/2016 10:05:00 PM
On 02/22/2016 10:34 PM, jonas.thornvall@gmail.com wrote:
> Den måndag 22 februari 2016 kl. 22:23:49 UTC+1 skrev jonas.t...@gmail.com:
>> Den måndag 22 februari 2016 kl. 19:29:55 UTC+1 skrev jonas.t...@gmail.com:
>>> Den måndag 22 februari 2016 kl. 16:47:58 UTC+1 skrev Silvio:
>>>> On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
>>>>> Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
>>>>>> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
>>>>>>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
>>>>>>
>>>>>> Javascript objects alone have nothing to do with UI interaction. If you
>>>>>> want your object to respond to it, bind said events of a visual element
>>>>>> to the methods you need.
>>>>>
>>>>> Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
>>>>>
>>>>> The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
>>>>>
>>>>> Well i will post my example code soon, and you can tell if it is the wrong way to do it.
>>>>>
>>>>
>>>> Depends on what you are doing. If your array of rectangles is actually
>>>> an array of DOM objects (for example a bunch of DIVs positioned inside
>>>> some parent container element or perhaps SVG objects) then you could
>>>> indeed register the listeners on those "rectangles".
>>>>
>>>> The basic fact is that registering event handlers is defined on DOM
>>>> elements.
>>>>
>>>> If you have your own definition of rectangles you will still need a DOM
>>>> object that you use to represent them on (draw) and that will give you
>>>> events that you can map back to your rectangles. Something like a canvas
>>>> would work fine...
>>>
>>> The logic with the eventhandlers somehow escape me why isnt't mouseup and mousedown booleans i get the object. But i fail to see how i can release it so maybe the approach is wrong?
>>>
>>> <!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
>>>
>>> var refresh = 5;
>>> var timer = 5;
>>>
>>> //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]
>>> 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(){
>>> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
>>> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
>>> hold=!hold;
>>> }
>>> }
>>>
>>> //Paint out and redraw stuff on canvas
>>> function paint_out(canvas, message)
>>> {
>>> if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10; }
>>> ctx.font = '18pt Calibri';
>>> ctx.fillStyle = 'black';
>>> ctx.fillText(message, 10, 25);
>>> ctx.fillStyle = "#FF0000";
>>> ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
>>> }
>>>
>>> //Start animation "form"
>>> function startanime()
>>> {
>>> refresh = setInterval(redraw, 50);
>>> }
>>>
>>> //Stop animation "form"
>>> function stopanime()
>>> {
>>> clearInterval(refresh);
>>> }
>>> </script>
>>
>> I just fail to see why and how mouseDown can still generate new cordinates when the mousebutton no longer pressed? And why isn't it a mousedown a boolean?
>> I understan mousepos
>>
>> What is actually mouseup, mousedown and mousemove they do not seem to be variables? How can a listener for mouseDown keep generating cordinates after button released?
>>
>> Or is the mouseDown.x and mouseDown.y same x and y and as in the other two eventhandlers?
>>
>> myCanvas.addEventListener("mousedown", function(evt){
>> mouseDown = getPosition(canvas, evt);
>> message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>> }, false);
>>
>> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
>> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
>> }
>
> I got it working but i can't judge the approach.
>
> <!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
>
> var refresh = 5;
> var timer = 5;
>
> //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]
> 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(){
> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
> hold=true;
>
> } else if (mouseUp.x>=SQposX && mouseUp.x<=(SQposX+SQwidth) && mouseUp.y>=SQposY && mouseUp.y<=(SQposY+SQwidth)){
> message = 'Released it:' + mousePos.x + ',' + mousePos.y;
> hold=false
> }
> }
> //Paint out and redraw stuff on canvas
> function paint_out(canvas, message)
> {
> if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10; }
> ctx.font = '18pt Calibri';
> ctx.fillStyle = 'black';
> ctx.fillText(message, 10, 25);
> ctx.fillStyle = "#FF0000";
> ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
> }
>
> //Start animation "form"
> function startanime()
> {
> refresh = setInterval(redraw, 150);
> }
>
> //Stop animation "form"
> function stopanime()
> {
> clearInterval(refresh);
> }
> </script>
>
I am sorry but I lack the time to really go over this in detail. But at
first glance it seems your approach is what I described last: you have a
canvas object and draw your own rectangles on it.
The only object that is managed by your execution context (the curent
HTML page inside the browser, in this case) is that canvas. It offers
primitives for drawing on its surface and for listening to events like
mouse events and keyboard events. The only one who understands your
rectangles is you. So you have to explicitly draw them on the canvas and
you have to translate mouse events on the canvas to an interpretation
involving your rectangles. Which is a perfectly plausible approach. You
could extend that into rectangles supporting mouse event listeners on
their own but you would have to implement that logic yourself.