DZone Snippets: svg code

Drawing with RMagick

jrobertson (James Robertson) — Wed, 30 Jul 2008 10:48:33 GMT

This Ruby code creates a shape.gif [twitxr.com] file which shows an oval line with dimensions on a graph paper background.

Source: RMagick Portfolio - Drawings [rubyforge.org]



require 'RMagick'



canvas = Magick::Image.new(240, 300,

              Magick::HatchFill.new('white','lightcyan2'))

gc = Magick::Draw.new



# Draw ellipse

gc.stroke('red')

gc.stroke_width(3)

gc.fill_opacity(0)

gc.ellipse(120, 150, 80, 120, 0, 270)



# Draw endpoints

gc.stroke('gray50')

gc.stroke_width(1)

gc.circle(120, 150, 124, 150)

gc.circle(200, 150, 204, 150)

gc.circle(120,  30, 124,  30)



# Draw lines

gc.line(120, 150, 200, 150)

gc.line(120, 150, 120,  30)



# Annotate

gc.stroke('transparent')

gc.fill('black')

gc.text(130, 35, "End")

gc.text(188, 135, "Start")

gc.text(130, 95, "'Height=120'")

gc.text(55, 155, "'Width=80'")



gc.draw(canvas)

canvas.write('shapes.png')

The above was executed within an IRB session on Ubuntu which had Imagemagick and librmagick-ruby apt-get installed.
The code was found while browsing RMagick's site for examples on how to convert SVG to PNG for creating a video animation in OGG Theora format.

Animate a shape using SVG

jrobertson (James Robertson) — Tue, 29 Jul 2008 23:05:10 GMT

The animation of a rectangle using SVG was tested using Firefox.



 

     onclick="moveRectangle(evt, document.getElementById('r1'));"> 

  click to animate the rectangle

Externally reference ECMAScript in an SVG file

jrobertson (James Robertson) — Sun, 20 Apr 2008 19:21:59 GMT

source: Using Internal & External Scripts, [rit.edu]

I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.

Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]

Undo the last shape stored in the whiteboard message buffer

jrobertson (James Robertson) — Mon, 07 Apr 2008 23:42:40 GMT

This ECMAScript implements an undo feature for the SVG whiteboard. When the user presses CTRL+Z the last shape in the message_buffer variable is removed.



  function undoLast() {

    ipos = getLastMethodPos(message_buffer,-1)

    if (ipos > 0)

      message_buffer = message_buffer.substring(0, ipos)

    else

      message_buffer = ''    

  }

  

  function getLastMethodPos(message, pos) {

    i = message.indexOf('    if (i >= 0) 

      result = getLastMethodPos(message, i)

    else

      result = pos 

    return result;

  }

Here's an example of the messages (containing shapes) stored in the message_buffer



"shape

polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D

%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20

513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474%

2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22

5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20

478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497%

2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24

3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20

560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558%

2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18

4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20

518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479%

2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13

1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A

34855var='type'>shapepolyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none

%27%20stroke%3D%27red%27%20id%3D

%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20

453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438%

2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19

6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20

431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432%

2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22

9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20

438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445%

2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25

2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20

469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481%

2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26

3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20

511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524%

2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25

7%20540%2C257%27%23%3A34855"

In the above example there are 2 methods calls ready to be sent to the server, the 2nd method would be removed after the undoLast() function had executed.

The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results.

This code only removes the shape before it's sent to the server, I still need to write the code to delete a shape which is in the server whiteboardqueue, and remove the shape element from the web browser display (SVG DOM).

Retrieve the color from an SVG shape

jrobertson (James Robertson) — Sun, 30 Mar 2008 14:37:02 GMT



    y="120" width="20px" height="20px" fill="pink" stroke="blue" onclick="setPenColour(evt)"/>

    function setPenColour(evt) {

    m_pen_colour = evt.target.getAttribute('fill');

  }

  ]]>

Reference:
Tutorials - SVG [kevlindev.com]
Tutorials - SVG - Events [kevlindev.com]

Drawing a single Polyline using SVG

jrobertson (James Robertson) — Sat, 22 Mar 2008 19:15:43 GMT

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].



		xmlns:xlink="http://www.w3.org/1999/xlink" >

  



    y="0" width="100%" height="100%" fill="yellow" />

  



  



  Click something to move it

  Click nothing to add something

*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].