Difference between revisions of "Draw API"

From HSYCO
Jump to navigation Jump to search
Line 14: Line 14:
 
*extent: the angular extent of the arc in degrees
 
*extent: the angular extent of the arc in degrees
 
*type: the closure type for the arc: "open", "chord" or "pie"
 
*type: the closure type for the arc: "open", "chord" or "pie"
*border_color: see [[#color]]  
+
*border_color: [[#color|see the note below]]
*fill_color: fill color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, '255,0,0' is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
+
*fill_color: [[#color|see the note below]]
  
 
=== Fill ===
 
=== Fill ===
Line 21: Line 21:
 
Fills the whole area with given color.
 
Fills the whole area with given color.
 
'''Parameters:'''
 
'''Parameters:'''
*color: color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red) or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow. Set color to "transparent" to create a transparent background, before drawing other objects.
+
*color: [[#color|see the note below]]
  
 
=== Image ===
 
=== Image ===
Line 38: Line 38:
 
*xN: X axis coordinate of N-th point
 
*xN: X axis coordinate of N-th point
 
*yN: Y axis coordinate of N-th point
 
*yN: Y axis coordinate of N-th point
*color: color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
+
*color: [[#color|see the note below]]
  
 
=== Spline ===
 
=== Spline ===
Line 49: Line 49:
 
* xN: X axis coordinate of N-th point
 
* xN: X axis coordinate of N-th point
 
* yN: Y axis coordinate of N-th point
 
* yN: Y axis coordinate of N-th point
* color: color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
+
* color: [[#color|see the note below]]
  
 
=== Rectangle ===
 
=== Rectangle ===
Line 58: Line 58:
 
* w: the width of the rectangle
 
* w: the width of the rectangle
 
* h: the height of the rectangle
 
* h: the height of the rectangle
* border_color: fill color can be set using an RGB comma separated numeric notation, with
+
* border_color: [[#color|see the note below]]
primary color numbers from 0 to 255 (for example, “color:255,0,0” is red),
+
* fill_color: [[#color|see the note below]]
or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
 
* fill_color: fill color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red),
 
or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
 
 
 
 
=== String ===
 
=== String ===
 
<source lang="java">string(text, x, y, font, style, size, color)</source>
 
<source lang="java">string(text, x, y, font, style, size, color)</source>
Line 70: Line 66:
 
* x: the x coordinate of the location where the String should be rendered - y: the y coordinate of the location where the String should be rendered - font: font name, like “arial”, “helvetica”, “courier” etc.
 
* x: the x coordinate of the location where the String should be rendered - y: the y coordinate of the location where the String should be rendered - font: font name, like “arial”, “helvetica”, “courier” etc.
 
* style: “bold”, “italic”, or “bolditalic”
 
* style: “bold”, “italic”, or “bolditalic”
* color: color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red),
+
* color:[[#color|see the note below]]
or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.
 
  
 
=== Stroke ===
 
=== Stroke ===
Line 79: Line 74:
 
* w: the width of the stroke
 
* w: the width of the stroke
  
<div id="color">{{Note|fill color can be set using an RGB comma separated numeric notation, with primary color numbers from 0 to 255 (for example, “color:255,0,0” is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.}}</div>
+
 
 +
<div id="color">{{Note|A '''color''' can be set using an RGB comma separated numeric notation (delimited by quotes), with primary color numbers from 0 to 255 (for example, '''"255,0,0"''' is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.}}</div>
  
 
== Examples ==
 
== Examples ==
 
=== Draw a pie chart ===
 
=== Draw a pie chart ===

Revision as of 12:05, 27 February 2014

The Draw API allows to create graphics through various drawing instruction. These instructions are grouped together (separated as semicolons) and set as the value of the draw attribute of any image object. E.g.

fill('150,150,150');rectangle(10,10,100,100,red,green);line(10,10,110,110,black);

Functions

Arc

arc(x, y, w, h, start, extent, type, border_color, fill_color)

Draws an arc. Parameters:

  • x: the x coordinate of the upper-left corner of the arc's framing rectangle
  • y: the y coordinate of the upper-left corner of the arc's framing rectangle
  • w: the overall width of the full ellipse of which this arc is a partial section
  • h: the overall height of the full ellipse of which this arc is a partial section
  • start: the starting angle of the arc in degrees
  • extent: the angular extent of the arc in degrees
  • type: the closure type for the arc: "open", "chord" or "pie"
  • border_color: see the note below
  • fill_color: see the note below

Fill

fill(color)

Fills the whole area with given color. Parameters:

Image

image(file, x, y)

Parameters:

  • file: the full pathname, relative to the HSYCO home directory
  • x: the x coordinate of the location where the String should be rendered - y: the y coordinate of the location where the String should be rendered

Line

line(x1, y1, x2, y2, ...., color)

Draws a sequence of connected lines - x1: X axis coordinate of first point Parameters:

  • y1: Y axis coordinate of first point
  • x2: X axis coordinate of second point
  • y2: Y axis coordinate of second point
  • xN: X axis coordinate of N-th point
  • yN: Y axis coordinate of N-th point
  • color: see the note below

Spline

spline(x1, y1, x2, y2, ...., color)

draws a natural cubic spline interpolation of a sequence of points - x1: X axis coordinate of first point Parameters:

  • y1: Y axis coordinate of first point
  • x2: X axis coordinate of second point
  • y2: Y axis coordinate of second point
  • xN: X axis coordinate of N-th point
  • yN: Y axis coordinate of N-th point
  • color: see the note below

Rectangle

rectangle(x, y, w, h, border_color, fill_color)

Parameters:

  • x: the x coordinate of the upper-left corner of the rectangle
  • y: the y coordinate of the upper-left corner of the rectangle
  • w: the width of the rectangle
  • h: the height of the rectangle
  • border_color: see the note below
  • fill_color: see the note below

String

string(text, x, y, font, style, size, color)

Parameters:

  • text: quoted text
  • x: the x coordinate of the location where the String should be rendered - y: the y coordinate of the location where the String should be rendered - font: font name, like “arial”, “helvetica”, “courier” etc.
  • style: “bold”, “italic”, or “bolditalic”
  • color:see the note below

Stroke

stroke(w)

Set the stroke width for all subsequent drawing commands. Parameters:

  • w: the width of the stroke


A color can be set using an RGB comma separated numeric notation (delimited by quotes), with primary color numbers from 0 to 255 (for example, "255,0,0" is red), or using color names. The valid names are: black, blue, cyan, darkgray, gray, lightgray, green, magenta, orange, pink, red, white, yellow.

Examples

Draw a pie chart