draw code

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

Actionscript Draw Box

Function to draw a box with a specified width, height, and color, and return the box MovieClip

function draw_box(w,h,c){
	var new_box = this.createEmptyMovieClip("new_box", this.getNextDepth());
	new_box.beginFill(c);
	new_box.lineStyle(0,0x000000,0);
	new_box.moveTo(0, 0);
	new_box.lineTo(w, 0);
	new_box.lineTo(w, h);
	new_box.lineTo(0, h);
	new_box.lineTo(0, 0);
	new_box.endFill();
	return new_box;
}

Sample function call draws a 200w x 25h pixel, black box:

draw_box(200,25,0x000000);

to ActionScript flash draw lineStyle moveTo lineTo beginFill endFill by bgidge on Jan 26, 2007

Allegro Dibujos de posicion relativa

Dibujos en allegro dependiendo de la posicion del mouse

#include <allegro.h>


void  dibujo(int x,int y){
      circle (screen, x+100,y+100,100,makecol(128,0,0));
      circlefill (screen,x+50,y+50,20,makecol(0,255,0));
      circlefill (screen,x+150,y+50,20,makecol(0,255,0));
      rect (screen,x+80,y+100,x+120,y+150,makecol(0,0,128));
      line (screen,x+50,y+180,x+150,y+180,makecol(128,128,0));
}

void init();
void deinit();


int main() {
	init();
	show_mouse(screen);
	while (!key[KEY_ESC]) {  
          clear_to_color(screen,0);
          dibujo(mouse_x,mouse_y);
	}

	deinit();
	return 0;
}
END_OF_MAIN();

void init() {
	int depth, res;
	allegro_init();
	depth = desktop_color_depth();
	if (depth == 0) depth = 32;
	set_color_depth(depth);
	res = set_gfx_mode(GFX_AUTODETECT_WINDOWED, 640, 480, 0, 0);
	if (res != 0) {
		allegro_message(allegro_error);
		exit(-1);
	}

	install_timer();
	install_keyboard();
	install_mouse();
	/* add other initializations here */
}

void deinit() {
	clear_keybuf();
	/* add other deinitializations here */
}

to c draw mouse allegro by jcongote on Sep 22, 2006

Sparkline: from PIL to S60

py_s60 1.1.3 has its drawing API very similar to PIL.
Porting from PIL to S60 is very easy. Here's an example
that I port a sparkline drawing function from
Joe Gregorio's article at xml.com

# modified from  Joe Gregorio's article at
# http://www.xml.com/pub/a/2005/06/22/sparklines.html

from appuifw import *
import e32

lock = e32.Ao_lock()
c = Canvas()
app.body = c
draw = c._draw

red, green, blue, gray = 0xff0000, 0x00ff00, 0x0000ff, 0x777777

def plot_sparkline(results, step=2, height=20, \
    min_m=None, max_m=None, last_m=None, \
    min_color=blue, max_color=green, last_color=red):
    coords = zip(range(1,len(results)*step+1, step), \
       [height - 3  - y/(101.0/(height-4)) for y in results])
    draw.line(coords, gray)
    if min_m:
        min_pt = coords[results.index(min(results))]
        draw.rectangle([min_pt[0]-1, min_pt[1]-1, min_pt[0]+1, min_pt[1]+1], fill=min_color)
    if max_m:
        max_pt = coords[results.index(max(results))]
        draw.rectangle([max_pt[0]-1, max_pt[1]-1, max_pt[0]+1, max_pt[1]+1], fill=max_color)
    if last_m:
        end = coords[-1]
        draw.rectangle([end[0]-1, end[1]-1, end[0]+1, end[1]+1], fill=last_color)


results = [88,84,82,92,82,86,66,82,44,64,66,88,96,80,24,26, \
        14,0,0,26,8,6,6,24,52,66,36,6,10,14,30]
plot_sparkline(results, 3, 30, min_m=1, max_m=1, last_m=1)

app.exit_key_handler = lock.signal
lock.wait()

to python series60 canvas sparkline draw pil by korakot on Jun 26, 2005

Popular @ dzone.com

Related Tags

Never been to DZone Snippets before?

Drawing a single Polyline using SVG

Actionscript Draw Box

Allegro Dibujos de posicion relativa

Sparkline: from PIL to S60