Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS 

Drawing a single Polyline using SVG

This code is very similar to Draw a series of lines using SVG [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 example of the SVG squiggle output [twitxr.com].
<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g id="sketch" class="sketch">

    <rect x="0"
y="0" width="100%" height="100%" fill="yellow" />
  </g>

  <script>
  <![CDATA[
  var	xmlns="http://www.w3.org/2000/svg"
  Root=document.documentElement
  on_start(Root)

  function mouseUp(evt) {
	  on_pen_up(Root);
  }

  function on_start(R){
	  var Attr={
	    "onmousemove":"mouseMove",
      "onmousedown":"add_line(evt)",	
      "onmouseup":"mouseUp"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_down(R){
	  var Attr={
	    "onmousemove":"addPoint(evt)",
	    "onmouseup":"on_pen_up(Root)"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_up(R){
	  var Attr={
	    "onmousemove":"null"
	  }
	  assignAttr(R,Attr)
  }

  function add_line(evt){
	  //if (evt.target.nodeName!="rect") return
	  var C=document.createElementNS(xmlns,"polyline") 
	
	  var Attr={
		  "x":30,
		  "y":180,
		  "fill":'none',
		  "stroke": '#44a',
		  "id":'pl1',
		  "stroke-width":2
	  }
    
	  assignAttr(C,Attr)
	  Root.appendChild(C)
    
	  on_pen_down(Root)
  }

  function addPoint (evt) {
    element = document.getElementById('pl1') 	
    var point = element.ownerDocument.documentElement.createSVGPoint(); 
    point.x = evt.clientX; 
    point.y = evt.clientY;
    
    element.points.appendItem(point);
  }

  function assignAttr(O,A){
	  for (i in A) O.setAttributeNS(null,i, A[i])
  }

  ]]>
  </script>

  <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
  <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>


*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].
to draw svg polyline create mousemove ecmascript mousedown by jrobertson on Mar 22, 2008

Draw a series of lines using SVG

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.
<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 onclick="addPoint(evt, document.getElementById('pl1'));"> 
  <title>click to add point to polyline</title>
  <script type="text/ecmascript">
    <![CDATA[ 
      function addPoint (evt, element) {
        var point = element.ownerDocument.documentElement.createSVGPoint(); 
        point.x = evt.clientX; 
        point.y = evt.clientY; 
        element.points.appendItem(point);
      }
    ]]>
  </script> 
  <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" />
  <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" />
</svg>
to svg polyline onclick create ecmascript mousedown by jrobertson on Mar 22, 2008
« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS