Solved

drawing with mouse events

Posted on 2009-05-06
2
872 Views
Last Modified: 2015-01-05
I have a div tag on my page with the following attributes:

<DIV onmouseup="toggleLoading(true);setEnd(event.offsetX, event.offsetY);drawPic();setData();"onmousedown="setStart(event.offsetX, event.offsetY);"
onmouseover="setIndex();setPoints(event.offsetX, event.offsetY);" id="divCanvas" >

The onmouseup function sets the end coordinates  and the onmousedown sets the start coordinates.  I want to use the onmouseover to capture all of the points inbetween.

I do that with creating two new arrays in my js file:
var Xpoints = new Array();
var YPoints = new Array();

THen in the setPoints function:

function setPoints(inpX, inpY) {

    if (CurrentTool == "DRAWPOLYLINE") {
        Xpoints[index] = inpX;
        YPoints[index] = inpY;
        index++;
    }
    else {
//do nothing
    }

THen after the mousup is called, I have something like this:
Here I want to draw each point saved in the arrays.
for (x in Xpoints)
             jg.freeform(Xpoints[x], YPoints[x], CurrentStroke, CurrentStroke);

I have two problems:

1) WIth my original div tag, I am getting an error with the mouseover event...that an object was expected.

2) When I draw the array I don't get anything...I suspect that is becuase the onmoueover is not working.  If I try to draw just one coordinate (the first or last, which I record with the mousedown and mouseup events, it draws the one point, but I want all of them drawn).

Thanks
0
Comment
Question by:wizkid2332
  • 2
2 Comments
 
LVL 10

Expert Comment

by:bugada
Comment Utility
You must use onmousemove event to capture each pixel while the mouse is moving. Mouseover only fires when your pointer enters the div.

A code like your is not crossbrowser but IE oriented. If this is not a problem, continue on this road, otherway try to change it like the following snippet

To get coords you must use pageX, pageY (FF/GC/Safari) or a more complex function for IE (see Mousecoords function).

This code is untested, it's just an example, may contain typos or bugs.


<script>

window.onload = function() {

   var div = document.getElementById("divCanvas");

   

   div.onmouseup = function(e) {

      e = e || window.event;

      toggleLoading(true);

      setEnd(event.offsetX, event.offsetY);

      drawPic();

      setData();

   };

   

   div.onmousedown = function(e) {

      e = e || window.event;

      var coords = mouseCoords(e);

      setStart(coords.x, coords );

   };

   

   div.onmousemove = function(e) {

      e = e || window.event;

      setIndex();

      var coords = mouseCoords(e);

      setPoints(coords.x, coords.y);

   }; 

   

   function mouseCoords(e){

      if (e.pageX || e.pageY) {

         return {x:e.pageX, y:e.pageY};

      }

      return {

         x:e.clientX + document.body.scrollLeft - document.body.clientLeft,

         y:e.clientY + document.body.scrollTop  - document.body.clientTop

      };

   };

};
 

function setPoints(inpX, inpY) {
 

    if (CurrentTool == "DRAWPOLYLINE") {

        Xpoints[index] = inpX;

        YPoints[index] = inpY;

        index++;

    } else {

//do nothing

    }

};
 

</script>
 

<div id="divcanvas"></div>

Open in new window

0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
Comment Utility
sorry i've made some typos, try this code


<script>

window.onload = function() {

   var div = document.getElementById("divCanvas");

   

   div.onmouseup = function(e) {

      e = e || window.event;

      toggleLoading(true);

      var coords = mouseCoords(e);

      setEnd(coords.x, coords.y);

      drawPic();

      setData();

   };

   

   div.onmousedown = function(e) {

      e = e || window.event;

      var coords = mouseCoords(e);

      setStart(coords.x, coords.y);

   };

   

   div.onmousemove = function(e) {

      e = e || window.event;

      setIndex();

      var coords = mouseCoords(e);

      setPoints(coords.x, coords.y);

   }; 

   

   function mouseCoords(e){

      if (e.pageX || e.pageY) {

         return {x:e.pageX, y:e.pageY};

      }

      return {

         x:e.clientX + document.body.scrollLeft - document.body.clientLeft,

         y:e.clientY + document.body.scrollTop  - document.body.clientTop

      };

   };

};

</script>

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now