DZone Snippets: mousemove code http://snippets.dzone.com/posts Fri, 25 Jul 2008 00:07:47 GMT DZone Snippets: mousemove code Drawing a single Polyline using SVG http://snippets.dzone.com/posts/show/5270 This code is very similar to <a href="http://snippets.dzone.com/posts/show/5269">Draw a series of lines using SVG</a> [dzone.com] but now we can draw a series of points at the same time the mouse button is pressed and is moving. Here's an <a href="http://twitxr.com/image/18451/">example of the SVG squiggle output</a> [twitxr.com]. <br /><code> <br /><svg xmlns="http://www.w3.org/2000/svg" width="100%" <br /> xmlns:xlink="http://www.w3.org/1999/xlink" > <br /> <g id="sketch" class="sketch"> <br /> <br /> <rect x="0" <br />y="0" width="100%" height="100%" fill="yellow" /> <br /> </g> <br /> <br /> <script> <br /> <![CDATA[ <br /> var xmlns="http://www.w3.org/2000/svg" <br /> Root=document.documentElement <br /> on_start(Root) <br /> <br /> function mouseUp(evt) { <br /> on_pen_up(Root); <br /> } <br /> <br /> function on_start(R){ <br /> var Attr={ <br /> "onmousemove":"mouseMove", <br /> "onmousedown":"add_line(evt)", <br /> "onmouseup":"mouseUp" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function on_pen_down(R){ <br /> var Attr={ <br /> "onmousemove":"addPoint(evt)", <br /> "onmouseup":"on_pen_up(Root)" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function on_pen_up(R){ <br /> var Attr={ <br /> "onmousemove":"null" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function add_line(evt){ <br /> //if (evt.target.nodeName!="rect") return <br /> var C=document.createElementNS(xmlns,"polyline") <br /> <br /> var Attr={ <br /> "x":30, <br /> "y":180, <br /> "fill":'none', <br /> "stroke": '#44a', <br /> "id":'pl1', <br /> "stroke-width":2 <br /> } <br /> <br /> assignAttr(C,Attr) <br /> Root.appendChild(C) <br /> <br /> on_pen_down(Root) <br /> } <br /> <br /> function addPoint (evt) { <br /> element = document.getElementById('pl1') <br /> var point = element.ownerDocument.documentElement.createSVGPoint(); <br /> point.x = evt.clientX; <br /> point.y = evt.clientY; <br /> <br /> element.points.appendItem(point); <br /> } <br /> <br /> function assignAttr(O,A){ <br /> for (i in A) O.setAttributeNS(null,i, A[i]) <br /> } <br /> <br /> ]]> <br /> </script> <br /> <br /> <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text> <br /> <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text> <br /></svg> <br /> <br /></code> <br /> <br />*update 7:44pm* <br />By simply making the id unique using a global variable count it was possible to draw <a href="http://www.twitxr.com/image/18474/">multiple polylines</a> [twitxr.com]. Sat, 22 Mar 2008 19:15:43 GMT http://snippets.dzone.com/posts/show/5270 jrobertson (James Robertson) Capturing the mousemove coordinates http://snippets.dzone.com/posts/show/5264 Source code copied from <a href="http://javascript.internet.com/page-details/mouse-coordinates.html">The JavaScript Source: Page Details: Mouse Coordinates</a> [internet.com] <br />Tested on Firefox. <br /><code> <br /><!-- ONE STEP TO INSTALL MOUSE COORDINATES: <br /> <br /> 1. Copy the coding into the BODY of your HTML document --> <br /> <br /><!-- STEP ONE: Paste this code into the BODY of your HTML document --> <br /> <br /><BODY> <br /> <br /><form name="Show"> <br />X <input type="text" name="MouseX" value="0" size="4"><br> <br />Y <input type="text" name="MouseY" value="0" size="4"><br> <br /></form> <br /> <br /><script language="JavaScript1.2"> <br /><!-- Original: CodeLifter.com (support@codelifter.com) --> <br /><!-- Web Site: http://www.codelifter.com --> <br /> <br /><!-- This script and many more are available free online at --> <br /><!-- The JavaScript Source!! http://javascript.internet.com --> <br /> <br /><!-- Begin <br /> var IE = document.all?true:false; <br /> if (!IE) document.captureEvents(Event.MOUSEMOVE) <br /> document.onmousemove = getMouseXY; <br /> <br /> var tempX = 0; <br /> var tempY = 0; <br /> <br /> function getMouseXY(e) { <br /> if (IE) { // grab the x-y pos.s if browser is IE <br /> tempX = event.clientX + document.body.scrollLeft; <br /> tempY = event.clientY + document.body.scrollTop; <br /> } <br /> else { // grab the x-y pos.s if browser is NS <br /> tempX = e.pageX; <br /> tempY = e.pageY; <br /> } <br /> <br /> if (tempX < 0){tempX = 0;} <br /> if (tempY < 0){tempY = 0;} <br /> <br /> document.Show.MouseX.value = tempX; <br /> document.Show.MouseY.value = tempY; <br /> <br /> return true; <br /> } <br />// End --> <br /> <br /><p><center> <br /><font face="arial, helvetica" size"-2">Free JavaScripts provided<br> <br />by <a href="http://javascriptsource.com">The JavaScript Source</a></font> <br /></center><p> <br /> <br /><!-- Script Size: 1.33 KB --> <br /></code> <br />*update 10:55am 21-Mar-08* <br />I have decided to use the following code instead as it looks a bit cleaner, and more up-to-date. <br />Tested on Firefox 2 and IE 6. <br /><code> <br />document.onmousemove = mouseMove; <br /> <br />function mouseMove(ev){ <br /> ev = ev || window.event; <br /> var mousePos = mouseCoords(ev); <br />} <br /> <br />function mouseCoords(ev){ <br /> if(ev.pageX || ev.pageY){ <br /> return {x:ev.pageX, y:ev.pageY}; <br /> } <br /> return { <br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, <br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop <br /> }; <br />} <br /></code> <br />Reference: <a href="http://snipr.com/22a5e">How to Drag and Drop in JavaScript</a> [webreference.com] Thu, 20 Mar 2008 22:39:21 GMT http://snippets.dzone.com/posts/show/5264 jrobertson (James Robertson)