SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
The 2D Graphics Library in Perl
 Tutorial and Reference Manual



                       by
    Malay K Basu <curiouser@ccmb.res.in>
            Version 0.04, May 8, 2003
Copyright c 2003 Malay K Basu. All rights reserved.
This document is free; you can redistribute it and/or modify it under the terms of the Perl
Artistic license.
This document is distributed in the hope that it will be useful, but WITHOUT ANY WAR-
RANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE.
Contents

1   Getting Started      1
    1.1   From raster to vector   1
    1.2   A bit more about SVG     2
    1.3   What is Pastel?    2
    1.4   Requirements       3
    1.5   Installation   3
    1.6   Code-convention using Pastel             3
    1.7   Some design decisions        4
          1.7.1    Exception handling          4
          1.7.2    Graphics context        4




                                                   3
Chapter 1



                          Getting Started

    C OMPUTER GRAPHICS ARE EITHER bitmapped raster format or vector format. The
    former is a pixel by pixel definition of the graphics a rasterizer displays the graphics
    just by just representing the pixels on screen. Vector data on the other hand is
    represented by abstract object notation and a rasterizer has to calculate the pixels
    to render before actually displaying the graphics.
    Unfortunately, graphics over the web was traditionally of bitmap raster format (e.g.,
    GIF, JPEG, PNG). These graphics formats are not difficult to create but they have
    two great big flaws–the lack of scalability (i.e., they lose resolution when scaled
    to a bigger size), and the text is not text (i.e., the text also becomes a bitmap).
    They are also very bulky in nature, in spite of the existence of efficient compression
    algorithms. Raster graphics of course has sometimes more advantages over vector
    for pixel by pixel rendering. If your require tons of points you are better off using a
    raster format.


1.1 From raster to vector

    There was of course an alternative the traditional raster format–vector images. Vec-
    tor images by definition are created as instruction sets to the display machine. The
    display machine computes all the points and their attributes on the fly and gener-
    ates the bitmap to show it to the users.
    The advantage of this method of display is that the image immediately becomes
    resolution independent. All the modern fonts are nothing but vector instructions
    to the display machine, thus, text is vector display remains text.
    For quite sometime there was only one dominant player for transferring vector data
    over the Web. Created by Macromedia, Flash R , became the standard for vector data
    distribution over the web. The Flash file format, though open-source is controlled
    by Macromedia.
    The situation changed with the invention of a new file format for vector data called

                                              1
2
     Chapter 1. Getting Started                                   1.2. A bit more about SVG


    Scalable Vector Graphics (SVG) by W3C.


1.2 A bit more about SVG

    SVG is a representation of graphics in plain text, more precisely, in XML. It has all
    the graphics primitives, like, line, rectangle, circle and much much more. To create
    an SVG file you just write instructions like this:
     <rect x="30" y="40" width="190" height="10" style="fill:#ff0000;stroke:
         none"/>


    The above code actually draws a rectangle 190 pixels wide starting from coordinate
    (30, 40) with height 10 pixels. It also says that the rectangle should be filled with
    color solid red and the outline of the rectangle should not be stroked.
    To actually draw this on screen you need to wrap this line with several SVG specific
    lines and then open this file into a viewer. We will not discuss this in details any
    further.


1.3 What is Pastel?

    Pastel is a Perl2D library written in of course, Perl. The main features of the Pastel
    are:

       1. Unlike the other SVG library, Pastel treats graphics object as graphics. That
          means, SVG is not dealt as XML but as a collection of graphics primitives.
          That means the particular file format not important to Pastel.

       2. One of the very well designed 2D graphics API is Java2D graphics. Instead of
          reimplementing a completely new set of API, Pastel implements Java2D API.
          Pastel takes the best of Java2D API but discards the complex part of it. Pastel
          API is, therefore, perlish but still well-accessible to Java programmers.

       3. Programmatically generating graphics requires tons of other features; not
          merely creating strings (using DOM or such API). You require at least a bare
          minimum support for computational geometry. Pastel implements all re-
          quired computational geometry algorithms.

       4. One of the nightmares of vector graphics format designer is the font issue.
          Pastel takes the full advantage any arbitrary fonts within file. Pastel also has
          sophisticated font-handling features. That means Pastel is ideally suited for
          server-side on-the-fly generation of SVG image that are heavily text-oriented.
3
     Chapter 1. Getting Started                                          1.4. Requirements


1.4 Requirements

    Pastel will work only for Perl 5.6 ans above. It takes advantage of the unicode sup-
    port of Perl.
    The SVG data generated by BioSVG can be viewed by any SVG viewer. The most
    common viewers are: Adobe SVG viewer (ASV), available from:
    http://www.adobe.com/svg/viewer/install/main.html.

    ASV is just a browser plug-in. Once installed, SVG data can be viewed on your
    browser. ASV is actually installed automatically with the Windows version of Acro-
    bat Reader R version 5.0 onward.
    The second most common viewer is Batik SVG viewer, available from:
    http://xml.apache.org/batik/index.html.

    Batik is written in Java, therefore, can be run in any platform. Batik is a stand-alone
    SVG viewer.


1.5 Installation

    Follow the standard Perl way:
    make
    make test
    make install




1.6 Code-convention using Pastel

    A very minimal Pastel file:
      #!/usr/bin/perl;
      use Pastel;
      my $graphics = Pastel::Graphics->new(); # create the graphics context
      $graphics->show(); # to dump the output to STDOUT
      $graphics->get_svg(); # to get the SVG document as strings


    Note that there are two ways to get the SVG. You can dump it on STDOUT, a
    method may be more preferable in case of CGI, or you can get the whole string,
    may be to embed the SVG document into an HTML file.
    All constructors should be called with named parameters:
      my $rect =
         Pastel::Geometry::Rectangle->new(
                    -x=>20,
                    -y=>30,
                    -width=>250,
                    -height=>300 );
4
      Chapter 1. Getting Started                                     1.7. Some design decisions


     Note that the constructor, in this case, new() is called with named parameters. The
     sequence of parameters could be interchanged.
     The method calls does not require this named parameters:
     Thus, you have to call this:
       $object->some_method(5, 10);




 1.7 Some design decisions

1.7.1 Exception handling

     There are some framework in Perl where they go a roundabout way to make Perl as
     close as Java. They create an elaborate framework of exception handling. I humbly
     differ from their opinions and believe that Perl is not meant to be used that way.
     Most of the calls in Pastel actually die in case of an internal error. Although stalwarts
     might disagree but it’s my belief (a belief can’t be argued) that this is the best way.
     And I have an argument for it- it actually keeps the code simple!
     But it is there if one requires it. Look at documentation of Pastel::Exception for
     details.


1.7.2 Graphics context

     User should create an object of Pastel::Graphics class. This object is called Graph-
     ics context and stores all the necessary information for correctly drawing graphics.
     The context is created like this:
       use Pastel;
       my $graphics = Pastel::Graphics->new(-width=>800, -height=>600);


     The width and the height parameters are the width and height of the SVG.
     The two most important method is this class are draw() and draw_string(). Which
     are used to draw classes inherited from Pastel::Shape and Pastel::String class, re-
     spectively. All the classes in Pastel::Geometry are derived from Pastel::Shape. And
     two classes Pastel::String and Pastel::Text::AttributedString can be drawn by
     the draw_string() method.
     Here, how you will draw some shapes:
       my $rectangle = Pastel::Geometry::Rectangle->new(-x=>50,-y=>60,-width
           =>200,-height=>300);
       $graphics->draw($rectangle);

       # Now write the ubiquitous hello world
       $graphics->draw_string("Hello world", 100, 150);

       # Now show the graphics
       $graphics->show();
5
 Chapter 1. Getting Started                                 1.7. Some design decisions


Note that we have used straight way a Perl string instead of Pastel::String object
as parameters to draw_string() method.
The graphics context also strore the color and the stroke. If you set the color and
the stroke of the graphics context, all the subsequent drawing will used the color
and the stroke currently set in the context.
Here we stroke a red-outlined and blue colored ellipse.
  #!/usr/bin/perl -w
  use Pastel;

  # create the graphics context
  my $graphics = Pastel::Graphics->new();

  #create the ellipse
  my $ellipse = Pastel::Geometry::Ellipse->new(-x=>20,-y=>30,-width=>200,-
      height=>150);

  # set color to blue
  $graphics->set_paint(Pastel::Color->blue());

  # fill the shape with blue color
  $graphics->fill($ellipse);

  # set the color for stroke
  $graphics->set_paint(Pastel::Color->red());

  # set the stroke
  $graphics->set_stroke(Pastel::BasicStroke->new());

  # Now draw the ellipse
  $graphics->draw($ellipse);

  # create something to write
  my $text = Pastel::Text::AttributedString->new("Pastel is cool!");
  $text->add_attribute("ANCHOR","MIDDLE");
  my $font = Pastel::Font->new("Lucida","bold",14);
  $text->add_attribute("FONT", $font);
  $text->add_attribute("COLOR", Pastel::Color->white());

  # get the centre of ellipse
  my $x = $ellipse->get_x() + $ellipse->get_width() / 2;
  my $y = $ellipse->get_y() + $ellipse->get_height() / 2;

  # draw the string in the middle of the ellipse
  $graphics->draw_string($text, $x, $y);

  $graphics->show();


The output is shown in Figure 1.1.
6
Chapter 1. Getting Started                1.7. Some design decisions




                             FIGURE 1.1

Más contenido relacionado

La actualidad más candente

Migrating from OpenGL to Vulkan
Migrating from OpenGL to VulkanMigrating from OpenGL to Vulkan
Migrating from OpenGL to VulkanMark Kilgard
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Mark Kilgard
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGDavid Isbitski
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsMark Kilgard
 
OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading LanguageJungsoo Nam
 
Sig13 ce future_gfx
Sig13 ce future_gfxSig13 ce future_gfx
Sig13 ce future_gfxCass Everitt
 
NV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsNV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsMark Kilgard
 
Practical Models in Practice
Practical Models in PracticePractical Models in Practice
Practical Models in PracticeCHOOSE
 
Game development
Game developmentGame development
Game developmentAsido_
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APITristan Lorach
 
Model-Driven Development in the context of Software Product Lines
Model-Driven Development in the context of Software Product LinesModel-Driven Development in the context of Software Product Lines
Model-Driven Development in the context of Software Product LinesMarkus Voelter
 
EXT_window_rectangles
EXT_window_rectanglesEXT_window_rectangles
EXT_window_rectanglesMark Kilgard
 
Modelling and Programming: Isn&rsquo;t it all the same?
Modelling and Programming: Isn&rsquo;t it all the same?Modelling and Programming: Isn&rsquo;t it all the same?
Modelling and Programming: Isn&rsquo;t it all the same?CHOOSE
 
GLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphGLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphMike Weiblen
 

La actualidad más candente (16)

Migrating from OpenGL to Vulkan
Migrating from OpenGL to VulkanMigrating from OpenGL to Vulkan
Migrating from OpenGL to Vulkan
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well
 
OpenGL 4 for 2010
OpenGL 4 for 2010OpenGL 4 for 2010
OpenGL 4 for 2010
 
OpenGL for 2015
OpenGL for 2015OpenGL for 2015
OpenGL for 2015
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUs
 
OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading Language
 
Sig13 ce future_gfx
Sig13 ce future_gfxSig13 ce future_gfx
Sig13 ce future_gfx
 
NV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsNV_path rendering Functional Improvements
NV_path rendering Functional Improvements
 
Practical Models in Practice
Practical Models in PracticePractical Models in Practice
Practical Models in Practice
 
Game development
Game developmentGame development
Game development
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan API
 
Model-Driven Development in the context of Software Product Lines
Model-Driven Development in the context of Software Product LinesModel-Driven Development in the context of Software Product Lines
Model-Driven Development in the context of Software Product Lines
 
EXT_window_rectangles
EXT_window_rectanglesEXT_window_rectangles
EXT_window_rectangles
 
Modelling and Programming: Isn&rsquo;t it all the same?
Modelling and Programming: Isn&rsquo;t it all the same?Modelling and Programming: Isn&rsquo;t it all the same?
Modelling and Programming: Isn&rsquo;t it all the same?
 
GLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraphGLSL Shading with OpenSceneGraph
GLSL Shading with OpenSceneGraph
 

Destacado

Josh Fraser's Lightening Talk at CloudCamp Paris
Josh Fraser's Lightening Talk at CloudCamp ParisJosh Fraser's Lightening Talk at CloudCamp Paris
Josh Fraser's Lightening Talk at CloudCamp ParisIntel Corporation
 
DojoAjaxExperience2008
DojoAjaxExperience2008DojoAjaxExperience2008
DojoAjaxExperience2008tutorialsruby
 
Peer editing for the editorial
Peer editing for the editorialPeer editing for the editorial
Peer editing for the editorialeklauber
 
Perl%20Tutorial.!Picking%20Up%20Perl
Perl%20Tutorial.!Picking%20Up%20PerlPerl%20Tutorial.!Picking%20Up%20Perl
Perl%20Tutorial.!Picking%20Up%20Perltutorialsruby
 

Destacado (6)

Josh Fraser's Lightening Talk at CloudCamp Paris
Josh Fraser's Lightening Talk at CloudCamp ParisJosh Fraser's Lightening Talk at CloudCamp Paris
Josh Fraser's Lightening Talk at CloudCamp Paris
 
DojoAjaxExperience2008
DojoAjaxExperience2008DojoAjaxExperience2008
DojoAjaxExperience2008
 
Peer editing for the editorial
Peer editing for the editorialPeer editing for the editorial
Peer editing for the editorial
 
Perl%20Tutorial.!Picking%20Up%20Perl
Perl%20Tutorial.!Picking%20Up%20PerlPerl%20Tutorial.!Picking%20Up%20Perl
Perl%20Tutorial.!Picking%20Up%20Perl
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
 
Geo
GeoGeo
Geo
 

Similar a pastel

Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVGSpeedPartner GmbH
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
Creating Custom Charts With Ruby Vector Graphics
Creating Custom Charts With Ruby Vector GraphicsCreating Custom Charts With Ruby Vector Graphics
Creating Custom Charts With Ruby Vector GraphicsDavid Keener
 
CS 354 Programmable Shading
CS 354 Programmable ShadingCS 354 Programmable Shading
CS 354 Programmable ShadingMark Kilgard
 
An Introduction to Computer Science with Java .docx
An Introduction to  Computer Science with Java .docxAn Introduction to  Computer Science with Java .docx
An Introduction to Computer Science with Java .docxdaniahendric
 
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8Shaymaa
 
Tokamak2: themes and netbook shell
Tokamak2: themes and netbook shellTokamak2: themes and netbook shell
Tokamak2: themes and netbook shellMarco Martin
 
SVG Certification
SVG CertificationSVG Certification
SVG CertificationVskills
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
 
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...Codemotion
 
Easy charting with
Easy charting withEasy charting with
Easy charting withMajor Ye
 
NV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsNV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsMark Kilgard
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsSanjoy Kr. Paul
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic TutorialTao Jiang
 
Javaone2008 Bof 5102 Groovybuilders
Javaone2008 Bof 5102 GroovybuildersJavaone2008 Bof 5102 Groovybuilders
Javaone2008 Bof 5102 GroovybuildersAndres Almiray
 

Similar a pastel (20)

Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
Svghtml5 Meetup
Svghtml5 MeetupSvghtml5 Meetup
Svghtml5 Meetup
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Creating Custom Charts With Ruby Vector Graphics
Creating Custom Charts With Ruby Vector GraphicsCreating Custom Charts With Ruby Vector Graphics
Creating Custom Charts With Ruby Vector Graphics
 
CS 354 Programmable Shading
CS 354 Programmable ShadingCS 354 Programmable Shading
CS 354 Programmable Shading
 
An Introduction to Computer Science with Java .docx
An Introduction to  Computer Science with Java .docxAn Introduction to  Computer Science with Java .docx
An Introduction to Computer Science with Java .docx
 
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
 
Tokamak2: themes and netbook shell
Tokamak2: themes and netbook shellTokamak2: themes and netbook shell
Tokamak2: themes and netbook shell
 
SVG Certification
SVG CertificationSVG Certification
SVG Certification
 
Next generation Graphics: SVG
Next generation Graphics: SVGNext generation Graphics: SVG
Next generation Graphics: SVG
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Plunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s beginPlunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s begin
 
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
 
Easy charting with
Easy charting withEasy charting with
Easy charting with
 
NV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsNV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked Questions
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
 
Javaone2008 Bof 5102 Groovybuilders
Javaone2008 Bof 5102 GroovybuildersJavaone2008 Bof 5102 Groovybuilders
Javaone2008 Bof 5102 Groovybuilders
 

Más de tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

Más de tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Último

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Último (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

pastel

  • 1. The 2D Graphics Library in Perl Tutorial and Reference Manual by Malay K Basu <curiouser@ccmb.res.in> Version 0.04, May 8, 2003
  • 2. Copyright c 2003 Malay K Basu. All rights reserved. This document is free; you can redistribute it and/or modify it under the terms of the Perl Artistic license. This document is distributed in the hope that it will be useful, but WITHOUT ANY WAR- RANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  • 3. Contents 1 Getting Started 1 1.1 From raster to vector 1 1.2 A bit more about SVG 2 1.3 What is Pastel? 2 1.4 Requirements 3 1.5 Installation 3 1.6 Code-convention using Pastel 3 1.7 Some design decisions 4 1.7.1 Exception handling 4 1.7.2 Graphics context 4 3
  • 4. Chapter 1 Getting Started C OMPUTER GRAPHICS ARE EITHER bitmapped raster format or vector format. The former is a pixel by pixel definition of the graphics a rasterizer displays the graphics just by just representing the pixels on screen. Vector data on the other hand is represented by abstract object notation and a rasterizer has to calculate the pixels to render before actually displaying the graphics. Unfortunately, graphics over the web was traditionally of bitmap raster format (e.g., GIF, JPEG, PNG). These graphics formats are not difficult to create but they have two great big flaws–the lack of scalability (i.e., they lose resolution when scaled to a bigger size), and the text is not text (i.e., the text also becomes a bitmap). They are also very bulky in nature, in spite of the existence of efficient compression algorithms. Raster graphics of course has sometimes more advantages over vector for pixel by pixel rendering. If your require tons of points you are better off using a raster format. 1.1 From raster to vector There was of course an alternative the traditional raster format–vector images. Vec- tor images by definition are created as instruction sets to the display machine. The display machine computes all the points and their attributes on the fly and gener- ates the bitmap to show it to the users. The advantage of this method of display is that the image immediately becomes resolution independent. All the modern fonts are nothing but vector instructions to the display machine, thus, text is vector display remains text. For quite sometime there was only one dominant player for transferring vector data over the Web. Created by Macromedia, Flash R , became the standard for vector data distribution over the web. The Flash file format, though open-source is controlled by Macromedia. The situation changed with the invention of a new file format for vector data called 1
  • 5. 2 Chapter 1. Getting Started 1.2. A bit more about SVG Scalable Vector Graphics (SVG) by W3C. 1.2 A bit more about SVG SVG is a representation of graphics in plain text, more precisely, in XML. It has all the graphics primitives, like, line, rectangle, circle and much much more. To create an SVG file you just write instructions like this: <rect x="30" y="40" width="190" height="10" style="fill:#ff0000;stroke: none"/> The above code actually draws a rectangle 190 pixels wide starting from coordinate (30, 40) with height 10 pixels. It also says that the rectangle should be filled with color solid red and the outline of the rectangle should not be stroked. To actually draw this on screen you need to wrap this line with several SVG specific lines and then open this file into a viewer. We will not discuss this in details any further. 1.3 What is Pastel? Pastel is a Perl2D library written in of course, Perl. The main features of the Pastel are: 1. Unlike the other SVG library, Pastel treats graphics object as graphics. That means, SVG is not dealt as XML but as a collection of graphics primitives. That means the particular file format not important to Pastel. 2. One of the very well designed 2D graphics API is Java2D graphics. Instead of reimplementing a completely new set of API, Pastel implements Java2D API. Pastel takes the best of Java2D API but discards the complex part of it. Pastel API is, therefore, perlish but still well-accessible to Java programmers. 3. Programmatically generating graphics requires tons of other features; not merely creating strings (using DOM or such API). You require at least a bare minimum support for computational geometry. Pastel implements all re- quired computational geometry algorithms. 4. One of the nightmares of vector graphics format designer is the font issue. Pastel takes the full advantage any arbitrary fonts within file. Pastel also has sophisticated font-handling features. That means Pastel is ideally suited for server-side on-the-fly generation of SVG image that are heavily text-oriented.
  • 6. 3 Chapter 1. Getting Started 1.4. Requirements 1.4 Requirements Pastel will work only for Perl 5.6 ans above. It takes advantage of the unicode sup- port of Perl. The SVG data generated by BioSVG can be viewed by any SVG viewer. The most common viewers are: Adobe SVG viewer (ASV), available from: http://www.adobe.com/svg/viewer/install/main.html. ASV is just a browser plug-in. Once installed, SVG data can be viewed on your browser. ASV is actually installed automatically with the Windows version of Acro- bat Reader R version 5.0 onward. The second most common viewer is Batik SVG viewer, available from: http://xml.apache.org/batik/index.html. Batik is written in Java, therefore, can be run in any platform. Batik is a stand-alone SVG viewer. 1.5 Installation Follow the standard Perl way: make make test make install 1.6 Code-convention using Pastel A very minimal Pastel file: #!/usr/bin/perl; use Pastel; my $graphics = Pastel::Graphics->new(); # create the graphics context $graphics->show(); # to dump the output to STDOUT $graphics->get_svg(); # to get the SVG document as strings Note that there are two ways to get the SVG. You can dump it on STDOUT, a method may be more preferable in case of CGI, or you can get the whole string, may be to embed the SVG document into an HTML file. All constructors should be called with named parameters: my $rect = Pastel::Geometry::Rectangle->new( -x=>20, -y=>30, -width=>250, -height=>300 );
  • 7. 4 Chapter 1. Getting Started 1.7. Some design decisions Note that the constructor, in this case, new() is called with named parameters. The sequence of parameters could be interchanged. The method calls does not require this named parameters: Thus, you have to call this: $object->some_method(5, 10); 1.7 Some design decisions 1.7.1 Exception handling There are some framework in Perl where they go a roundabout way to make Perl as close as Java. They create an elaborate framework of exception handling. I humbly differ from their opinions and believe that Perl is not meant to be used that way. Most of the calls in Pastel actually die in case of an internal error. Although stalwarts might disagree but it’s my belief (a belief can’t be argued) that this is the best way. And I have an argument for it- it actually keeps the code simple! But it is there if one requires it. Look at documentation of Pastel::Exception for details. 1.7.2 Graphics context User should create an object of Pastel::Graphics class. This object is called Graph- ics context and stores all the necessary information for correctly drawing graphics. The context is created like this: use Pastel; my $graphics = Pastel::Graphics->new(-width=>800, -height=>600); The width and the height parameters are the width and height of the SVG. The two most important method is this class are draw() and draw_string(). Which are used to draw classes inherited from Pastel::Shape and Pastel::String class, re- spectively. All the classes in Pastel::Geometry are derived from Pastel::Shape. And two classes Pastel::String and Pastel::Text::AttributedString can be drawn by the draw_string() method. Here, how you will draw some shapes: my $rectangle = Pastel::Geometry::Rectangle->new(-x=>50,-y=>60,-width =>200,-height=>300); $graphics->draw($rectangle); # Now write the ubiquitous hello world $graphics->draw_string("Hello world", 100, 150); # Now show the graphics $graphics->show();
  • 8. 5 Chapter 1. Getting Started 1.7. Some design decisions Note that we have used straight way a Perl string instead of Pastel::String object as parameters to draw_string() method. The graphics context also strore the color and the stroke. If you set the color and the stroke of the graphics context, all the subsequent drawing will used the color and the stroke currently set in the context. Here we stroke a red-outlined and blue colored ellipse. #!/usr/bin/perl -w use Pastel; # create the graphics context my $graphics = Pastel::Graphics->new(); #create the ellipse my $ellipse = Pastel::Geometry::Ellipse->new(-x=>20,-y=>30,-width=>200,- height=>150); # set color to blue $graphics->set_paint(Pastel::Color->blue()); # fill the shape with blue color $graphics->fill($ellipse); # set the color for stroke $graphics->set_paint(Pastel::Color->red()); # set the stroke $graphics->set_stroke(Pastel::BasicStroke->new()); # Now draw the ellipse $graphics->draw($ellipse); # create something to write my $text = Pastel::Text::AttributedString->new("Pastel is cool!"); $text->add_attribute("ANCHOR","MIDDLE"); my $font = Pastel::Font->new("Lucida","bold",14); $text->add_attribute("FONT", $font); $text->add_attribute("COLOR", Pastel::Color->white()); # get the centre of ellipse my $x = $ellipse->get_x() + $ellipse->get_width() / 2; my $y = $ellipse->get_y() + $ellipse->get_height() / 2; # draw the string in the middle of the ellipse $graphics->draw_string($text, $x, $y); $graphics->show(); The output is shown in Figure 1.1.
  • 9. 6 Chapter 1. Getting Started 1.7. Some design decisions FIGURE 1.1