Giraffe Graphics Objects - Quick Reference


Quick Start Example: (within OpenForum framework)

OpenForum.includeScript("/OpenForum/Giraffe/giraffe.js"); var giraffeCanvas; OpenForum.init = function() { giraffeCanvas = Giraffe.quickStart( "canvas" ); //Add some graphics object to be drawn giraffeCanvas.add(new Giraffe.Line(100,100,130,150)); }; In page.content add a canvas <canvas id="canvas" width="800" height="600" style="border: solid 1px;"></canvas>

Line

var line = new Giraffe.?(x,y,x2,y2); Example: var line = new Giraffe.Line(100,100,130,150);

Rectangle

var rectangle = new Giraffe.Rectangle(x,y,width,height); Example: var rectangle = new Giraffe.Rectangle(100,100,50,90);

RoundedRectangle

var rectangle = new Giraffe.RoundedRectangle(x,y,width,height,radius); Example: var rectangle = new Giraffe.RoundedRectangle(100,100,50,90,10);

Circle

var circle = new Giraffe.Circle(x,y,radius); Example: var circle = new Giraffe.Circle(100,100,20);

Arc

var arc = new Giraffe.Arc(x,y,startAngle,sweepAngle,radius); Example: var arc = new Giraffe.Arc(100,100,45,180,20);

Picture

var picture = new Giraffe.Picture(x,y,src); Example: var picture = new Giraffe.Picture(100,100,"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"); var width = picture.img.width; var height = picture.img.height; picture.img.src = "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg";

var picture = new Giraffe.PixelCanvas(x,y,width,height); picture.setPixel(x,y,r,g,b,a); Example: var picture = new Giraffe.PixelCanvas(100,100,200,100); picture.setPixel(20,30,200,100,100,0.5);

Polygon

var polygon = new Giraffe.Polygon(x,y); Example: var polygon = new Giraffe.Polygon(100,100); polygon.addPoint(0,0); polygon.addPoint(100,80); polygon.addPoint(-100,80); polygon.closed = true; polygon.smooth = false;

Text

var text = new Giraffe.Text(x,y,text,textSize,font); Example: var text = new Giraffe.Text(100,100,"My Message",20,"Arial");

Composite

var composite = new Giraffe.Composite(x,y,rotation); Example: var composite = new Giraffe.Composite(100,100,Math.PI); composite.add(circle); composite.add(rectangle); composite.remove(rectangle); composite.deconstruct();

Shared by all Giraffe Graphics Objects

var graphicsObject = new Rectangle(100,100,50,90); graphicsObject.setCSSClass(className); Example: graphicsObject.setCSSClass("myCSSClass"); //Takes color as giraffe color and backgroundColor as giraffe fillColor graphicsObject.setColor(color); Example: graphicsObject.setColor("red").setFillColor("green"); Example: graphicsObject.setColor("rgba(200,100,50,0.5)"); graphicsObject.setFillColor(color); Example: graphicsObject.setFillColor("red").setColor("blue"); Example: graphicsObject.setFillColor("rgba(200,100,50,0.5)"); Giraffe.RadialColor(canvas,color1,color2,x,y,radius) Example: graphicsObject.setFillColor( new Giraffe.RadialColor(giraffe.canvas,"red","green",120,150,50) ); GradientColor(canvas,color1,color2,x1,y1,x2,y2) Example: graphicsObject.setFillColor( new GradientColor(giraffe.canvas,"red","green",120,150,130,170) ); graphicsObject.setShadow( new Giraffe.Shadow() ); Example: shadow = new Giraffe.Shadow(); shadow.color = '#999'; shadow.blur = 20; shadow.offsetX = 15; shadow.offsetY = 15; graphicsObject.setShadow(shadow); graphicsObject.setLineStyle(new Giraffe.LineStyle() ); Example: lineStyle = new Giraffe.LineStyle().setThickness(1.5).setEndCap("round"); //valid end caps: butt , round or square graphicsObject.setLineStyle(lineStyle); graphicsObject.setRotation(rotation); Example: graphicsObject.setRotation(Math.PI/3); graphicsObject.isInside(x,y); Example: if( graphicsObject.isInside(100,100) ) { //x,y is inside the object doStuff(); } graphicsObject.visible = true; graphicsObject.scaleX = 0.5; graphicsObject.scaleY = 0.8;

Methods that can be overridden

graphicsObject.onClick = function(x,y){ /* Mouse had clicked. Do stuff. */ }; graphicsObject.onMouseOver = function(x,y){ /* Mouse is over. Do stuff. */}; graphicsObject.onMouseOut = function(x,y){ /* Mouse is no longer over. Do stuff. */ }; graphicsObject.onMousePressed = function(x,y){ /* Mouse is over and has been pressed. Do stuff. */ }; graphicsObject.onMouseReleased = function(x,y) { /* Mouse is over and has been released. Do stuff. */}; graphicsObject.animate = function(frame){ /* Frame {frame} is rendering. Make changes now. */};

Transitions - ToDo