Core

OpenForum Giraffe {{version}}

Latest build {{buildDate}}

• Lines of code {{lines}}
• Size {{size}} KB

Edit OpenForum Giraffe Core <!--Extension InsertFile pageName="/OpenForum/Giraffe" fileName="giraffe.js" -->//==============================================================================================================// <!-- Version 2.8.33--> <!-- Built on Tue Mar 11 2025 22:50:30 GMT-0000 (GMT) --> <!-- Built by OpenForum Javascript Builder.--> <!-- Do not edit as changes may be overwritten --> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-header.js--> //==============================================================================================================// <!--<ul><li></li> <li> @overview</li> <li> Griaffe HTML5 canvas graphics library</li> <li> A set of Javascript objects that can be used to build animated</li> <li> interactive graphics using the HTML5 canvas.</li> <li> @author Nik Cross</li> <li> @version 2.8.33</li> <li> @license MIT</li> </ul>--> <!-- End of: /OpenForum/Giraffe/Core/giraffe-header.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-core.js--> //==============================================================================================================// <!--<ul><li></li> <li> Some helper methods used by Giraffe</li> <li> @class</li> </ul>--> Giraffe = { <!--<ul><li></li> <li> @private</li> </ul>--> canvases : <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>, <!--<ul><li></li> <li> @private</li> </ul>--> nextCanvasId : 0, <!--<ul><li></li> <li> @private</li> </ul>--> getCssValue : function(selector,attribute) { selector = selector.toLowerCase(); for(var sheet=0;sheet<document.styleSheets.length;sheet++) { var stylesheet = document.styleSheets<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/sheet"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/sheet does not exist. Click to create it.">sheet</a>; var n = stylesheet.cssRules.length; for(var i=0; i<n; i++) { var selectors = stylesheet.cssRules<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.selectorText.toLowerCase().split(","); var m = selectors.length; for(var j=0; j<m; j++) { if(selectors<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/j"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/j does not exist. Click to create it.">j</a>.trim() == selector) { var value = stylesheet.cssRules<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.style.getPropertyValue(attribute); if(value!="") { return value; } } } } } return null; } }; Giraffe.X=0; Giraffe.Y=1; Giraffe.DEG_TO_RAD = Math.PI/180; Giraffe.VERSION = "2.8.33"; Giraffe.getVersion = function() { return Giraffe.VERSION; }; Giraffe.BUILD_DATE = "Tue Mar 11 2025 22:50:30 GMT-0000 (GMT)"; Giraffe.getBuildDate = function() { return Giraffe.BUILD_DATE; }; <!-- End of: /OpenForum/Giraffe/Core/giraffe-core.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-canvas.js--> //==============================================================================================================// <!--<ul><li></li> <li> Canvas is the Giraffe representation of a canvas element on</li> <li> a page.</li> <li> @description</li> <li> It can have any number of GraphicsObject added to it,</li> <li> each drawn at its required place.</li> <li> An instance of Canvas can also be used to control animation and interaction</li> <li> between the user and GraphicsObjects using the Giraffe Animation library and</li> <li> the Giraffe Interactive library</li> <li> @class</li> <li> @param {String} canvasElementId dom canvas id</li> </ul>--> function Canvas(canvasElementId) { var self=this; self.id = "canvas"+Giraffe.nextCanvasId; Giraffe.nextCanvasId++; Giraffe.canvases<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ self.id "target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ self.id does not exist. Click to create it."> self.id </a> = self; self.graphicsObjects = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; self.canvasElement = document.getElementById(canvasElementId); self.width = self.canvasElement.width; self.height = self.canvasElement.height; self.canvasContext = self.canvasElement.getContext('2d', {alpha: true}); self.canvasContext.clearRect(0,0,self.width,self.height); // clear canvas self.scaleX=1; self.scaleY=1; self.paintMode = false; <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Canvas</li> </ul>--> <!--<ul><li></li> <li> Sets the scale of all graphics on the canvas. May be used to zoom in and out.</li> <li> @param {float} scaleX the multiplier scale for the x axis. Must be greater than 0.</li> <li> @param {float} scaleY the multiplier scale for the y axis. Must be greater than 0.</li> </ul>--> self.setScale = function(scaleX,scaleY) { if(!scaleY) scaleY = scaleX; self.scaleX=scaleX; self.scaleY=scaleY; return self; }; self.scaleSet=false; <!--<ul><li></li> <li> Clears the canvas and repaints all graphics on the canvas.</li> <li> If not using the animation library, this method is called to</li> <li> render the GraphicsObjects onto the canvas.</li> </ul>--> self.repaint = function() { if(!self.paintMode) { self.canvasContext.clearRect(0,0,self.width,self.height); // clear canvas } if(self.scaleSet==false) { self.canvasContext.scale(self.scaleX,self.scaleY); self.scaleSet=true; } for(var i=0;i<self.graphicsObjects.length;i++) { if(self.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible==true) { self.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>._repaint(); } } }; <!--<ul><li></li> <li> @private</li> </ul>--> self._store = function() { self.canvasContext.save(); }; <!--<ul><li></li> <li> @private</li> </ul>--> self._restore = function() { self.canvasContext.restore(); }; var setParent = function( composite, canvasParent ) { if(!composite.parts) return; composite.canvasParent = canvasParent; for(var p in composite.parts) { composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>.canvasParent = canvasParent; if( composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>.parts ) { setParent( composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>, canvasParent ); } } }; <!--<ul><li></li> <li> Adds a GraphicsObject instance to the canvas to be drawn</li> <li> @param {GraphicsObject} graphicsObject an instance of a GraphicsObject to add to the canvas.</li> <li></li> </ul>--> self.add = function( graphicsObject ) { self.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/self.graphicsObjects.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/self.graphicsObjects.length does not exist. Click to create it.">self.graphicsObjects.length</a> = graphicsObject; graphicsObject.canvasParent = self; if(graphicsObject.parts) { setParent( graphicsObject, self ); } graphicsObject.canvas = self.canvasContext; graphicsObject.draw(); // initialises composites }; <!--<ul><li></li> <li> Removes a GraphicsObject instance from the canvas.</li> <li> @param {GraphicsObject} graphicsObject to be removed</li> </ul>--> self.remove = function( graphicsObject ) { for(var i=0;i<self.graphicsObjects.length;i++) { if(self.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>==graphicsObject) { graphicsObject.canvasParent=null; self.graphicsObjects.splice(i,1); } } }; self.deserialize = function(json,target) { if(!target) target = self; for(var i=0;i<json.graphicsObjects.length;i++) { target.add( self.fromJson(json.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>) ); } }; self.serialize = function(source) { var json = { type: "Giraffe Serialized canvas", version: Giraffe.getVersion(), buildDate: Giraffe.getBuildDate(), graphicsObjects: <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a> }; if(source) { json.graphicsObjects.push( source.toJson() ); } else { for(var i=0;i<self.graphicsObjects.length;i++) { json.graphicsObjects.push( self.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.toJson() ); } } return json; }; if(OpenForum) { self.save = function(pageName,fileName,source) { OpenForum.saveFile(pageName + "/" + fileName, JSON.stringify(self.serialize(source),null,4) ); }; self.load = function(pageName,fileName,target) { OpenForum.loadFile(pageName + "/" + fileName, function(data) { self.deserialize(JSON.parse(data),target); }); }; } self.fromJson = function(json) { if(!json.type) return; var graphicsObject = new Giraffe<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/json.type"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/json.type does not exist. Click to create it.">json.type</a>(); <!--for(var part in json) { if(typeof json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "string" || typeof json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "number" || typeof json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "boolean") { graphicsObject<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>; } }--> if(graphicsObject.fromJson) { graphicsObject.fromJson(json,this,graphicsObject); } return graphicsObject; }; this.getPixel = function(x,y) { var data = self.canvasContext.getImageData(x, y, 1, 1).data; return {red: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>, green: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>, blue: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>, alpha: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a>}; }; <!--<ul><li></li> <li> Stretches a canvas to fit a window while maintaining the design aspect ratio</li> <li> @param screenDesignSize {Giraffe.Size} the width and height intended for the canvas</li> </ul>--> self.stretchToFitWindow = function() { var designWidth = self.canvasElement.width; var designHeight = self.canvasElement.height; var scaleChange = 1; var docWidth = window.innerWidth; var docHeight = window.innerHeight; if (docWidth != designWidth) { var scaleX = docWidth / designWidth; var scaleY = docHeight / designHeight; if (scaleX < scaleY) { scaleChange = scaleX; } else { scaleChange = scaleY; } self.setScale(scaleChange,scaleChange); self.canvasElement.width = designWidth*scaleChange; self.canvasElement.height = designHeight*scaleChange; } }; } <!--<ul><li><ol><li>@-</li></ol></li></ul>--> <!-- End of: /OpenForum/Giraffe/Core/giraffe-canvas.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-object.js--> //==============================================================================================================// <!--<ul><li></li> <li> This is the prototype object for all graphics objects that can be placed on a canvas.</li> <li> Extend this prototype to create your own GraphicsObject.</li> <li> @class</li> <li> </li> <li> @param {number} x the position the graphics object is to be drawn at on the x axis </li> <li> @param {number} y the position the graphics object is to be drawn at on the y axis </li> </ul>--> Giraffe.GraphicsObject = function(x,y) { this.canvasParent = null; this.canvas = null; this.x = x; this.y = y; this.id = null; this.rotation = 0; this.color = "black"; this.fillColor = null; this.shadow = null; this.lineStyle = null; this.scaleX = 1; this.scaleY = 1; this.visible=true; this.mouseOver=false; this.type="GraphicsObject"; this.draggable=false; this.excludeFromSave=false; var getReferenceType = function(type) { if(!Giraffe.ReferenceTypes) { Giraffe.ReferenceTypes = {}; } if(!Giraffe.ReferenceTypes<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type does not exist. Click to create it.">type</a>) { Giraffe.ReferenceTypes<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type does not exist. Click to create it.">type</a> = new Giraffe<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type does not exist. Click to create it.">type</a>(); } return Giraffe.ReferenceTypes<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/type does not exist. Click to create it.">type</a>; }; this.toJson = function(self) { if(this.excludeFromSave == true) return; if(!self) self = this; var json = {type: self.type}; var reference = getReferenceType(self.type); for(var part in self) { if(typeof self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "undefined" || self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>===null) { continue; } else if(typeof self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "string" || typeof self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "number" || typeof self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> === "boolean") { if(reference<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>!=self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>) { json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>; } } else if( part!="parent" && self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>.toJson && self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>.type) { json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>.toJson(); } } return json; }; this.fromJson = function(json, canvas ,self) { if(!self) self = this; for(var part in json) { if(json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> == null) { continue; } else if(json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>.type) { self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = new Giraffe<img src="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/json<a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>part" alt="json<a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>part" title="json<a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>part"/>.type](); self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>.fromJson( json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>, canvas, self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> ); } else if( isFunction( self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> ) ) { self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = eval( "f = "+json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> ); } else if( self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>==null || (!isObject( self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> ) && !isArray( self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> )) ) { self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a> = json<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/part does not exist. Click to create it.">part</a>; } } return self; }; <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf GraphicsObject</li> </ul>--> <!--<ul><li></li> <li> @private</li> </ul>--> this._repaint = function() { this.canvasParent._store(); if(this.canvas==undefined) { this.canvas = this.canvasParent.canvasContext; if(this.draggable) { this.canvasParent.makeDraggable( this ); } } this.canvas.translate(this.x,this.y); if(this.scaleX!=1 || this.scaleY!=1) { this.canvas.scale(this.scaleX,this.scaleY); } if(this.rotation!=0) { this.canvas.rotate(this.rotation); } if(this.shadow!=null) { this.canvas.shadowColor = this.shadow.color; this.canvas.shadowBlur = this.shadow.blur; this.canvas.shadowOffsetX = this.shadow.offsetX; this.canvas.shadowOffsetY = this.shadow.offsetY; } if(this.lineStyle!=null) { this.canvas.lineWidth = this.lineStyle.thickness; this.canvas.lineCap = this.lineStyle.endCap; } this.draw(); this.canvasParent._restore(); }; this.setScale = function(scaleX,scaleY) { if(!scaleY) scaleY = scaleX; this.scaleX=scaleX; this.scaleY=scaleY; return this; }; <!--<ul><li></li> <li> Uses the className to look up the values for color and background-color from</li> <li> any css style sheet loaded in the current page.</li> </ul>--> this.setCSSClass = function(className) { this.color = Giraffe.getCssValue(className,"color"); this.fillColor = Giraffe.getCssValue(className,"background-color"); return this; }; <!--<ul><li></li> <li> Sets the border outline color of the object.</li> <li> @param {string} color a definition of the color. Can be in the form html color name eg. "blue", html hex color eg. '#00FF00' or red green blue alpha format eg. rgba(0,255,0,0.5)</li> </ul>--> this.setColor = function(color) { this.color=color; return this; }; this.setShadow = function(shadow) { this.shadow = shadow; return this; }; this.setLineStyle = function(lineStyle) { this.lineStyle = lineStyle; return this; }; <!--<ul><li></li> <li> Sets the fill color of the object.</li> <li> @param {string} fillColor a definition of the color. Can be in the form html color name eg. "blue", html hex color eg. '#00FF00' or red green blue alpha format eg. rgba(0,255,0,0.5)</li> </ul>--> this.setFillColor = function(fillColor) { this.fillColor=fillColor; return this; }; this.setRotation = function(rotation) { this.rotation=rotation; return this; }; this.getRelativePosition = function(posX,posY) { var relativePosX = (posX-this.x) / this.scaleX; var relativePosY = (posY-this.y) / this.scaleY; if(this.rotation!=0) { //var l = Math.pow( (relativePosX*relativePosX)+(relativePosY*relativePosY),0.5 ); var cos = Math.cos(-this.rotation); var sin = Math.sin(-this.rotation); var x = (relativePosX*cos) - (relativePosY*sin); var y = (relativePosY*cos) + (relativePosX*sin); relativePosX = x; relativePosY = y; } return {x: relativePosX, y: relativePosY}; }; this.isInside = function(x,y){return false;}; this.onClick = function(x,y){}; this.onMouseOver = function(x,y){}; this.onMouseOut = function(x,y){}; this.onMousePressed = function(x,y){}; this.onMouseReleased = function(x,y) {}; this.animate = function(frame){}; this.draw = function(){}; }; //Deprecated GraphicsObject = Giraffe.GraphicsObject; <!--<ul><li><ol><li>@-</li></ol></li></ul>--> <!-- End of: /OpenForum/Giraffe/Core/giraffe-object.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/circle.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics Circle primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> <li> @param radius (number) the radius of the circle to be drawn. Must be greater than 0</li> </ul>--> Giraffe.Circle = function(x,y,radius) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Circle</li> </ul>--> this.x=x; this.y=y; this.radius=radius; this.type="Circle"; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.beginPath(); if(this.fillColor!=null) { this.canvas.fillStyle = this.fillColor; } this.canvas.strokeStyle = this.color; this.canvas.arc(0,0,this.radius,0,6.2,false); this.canvas.closePath(); if(this.fillColor!=null) { this.canvas.fill(); } this.canvas.stroke(); }; <!--<ul><li></li> <li> Checks to see if a given point lies inside the circle.</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the Circle</li> </ul>--> this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; var xl = posX; var yl = posY; if( Math.round( Math.pow( (xl*xl)+(yl*yl),0.5) )<this.radius) { return true; } else { return false; } }; }; Giraffe.Circle.prototype = new Giraffe.GraphicsObject(); //Deprecated Circle = Giraffe.Circle; <!-- End of: /OpenForum/Giraffe/Core/circle.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/rectangle.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics Rectangle primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> <li> @param width (number) the width of the rectangle</li> <li> @param height (number) the height of the rectangle</li> </ul>--> Giraffe.Rectangle = function(x,y,width,height) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Rectangle</li> </ul>--> var self = this; self.x=x; self.y=y; self.width=width; self.height=height; self.type="Rectangle"; <!--<ul><li></li> <li> Checks to see if a given point lies inside the rectangle.</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the Rectangle</li> </ul>--> self.isInside = function(posX,posY) { var rPos = self.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; if( posX>0 && posX<self.width && posY>0 && posY<self.height ){ return true; } else { return false; } }; <!--<ul><li></li> <li> @private</li> </ul>--> self.draw = function() { self.canvas.beginPath(); if(self.fillColor!=null) { self.canvas.fillStyle = self.fillColor; } self.canvas.strokeStyle = self.color; self.canvas.rect(0,0,self.width,self.height); self.canvas.closePath(); if(self.fillColor!=null) { self.canvas.fillRect(0,0,self.width,self.height); } self.canvas.stroke(); }; }; Giraffe.Rectangle.prototype = new Giraffe.GraphicsObject(); //Deprecated Rectangle = Giraffe.Rectangle; <!-- End of: /OpenForum/Giraffe/Core/rectangle.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/line.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics Line primative from one point to another</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the Line is to be drawn on the x axis</li> <li> @param y {number} the position that the Line is to be drawn on the y axis</li> <li> @param x2 {number} the position that the Line is to be drawn to on the x axis</li> <li> @param y2 {number} the position that the Line is to be drawn to on the y axis</li> </ul>--> Giraffe.Line = function(x,y,x2,y2) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Line</li> </ul>--> this.x=x; this.y=y; this.x2=x2; this.y2=y2; this.type="Line"; this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; var distance = Giraffe.pointToLineDistance( posX, posY, this.x, this.y, this.x+this.x2, this.y+this.y2 ); return distance < 2; }; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.strokeStyle = this.color; this.canvas.beginPath(); this.canvas.moveTo(0,0); this.canvas.lineTo(this.x2,this.y2); //this.canvas.closePath(); this.canvas.stroke(); }; }; Giraffe.Line.prototype = new Giraffe.GraphicsObject(); //Deprecated Line = Giraffe.Line; Giraffe.pointToLineDistance = function(px, py, x1, y1, x2, y2) { // Calculate the numerator const numerator = Math.abs<p>y2 - y1) * px - (x2 - x1) * py + x2 * y1 - y2 * x1); // Calculate the denominator const denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2</p>; // Calculate and return the distance const distance = numerator / denominator; return distance; }; <!-- End of: /OpenForum/Giraffe/Core/line.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/text.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> </ul>--> Giraffe.Text = function(x,y,text,textSize,font) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Text</li> </ul>--> var self = this; self.x=x; self.y=y; self.width=0; self.text=text; self.textSize=textSize; self.font = font; self.type = "Text"; self.weight = "normal"; self.setFontWeight = function(weight) { self.weight = weight; return this; }; <!--<ul><li></li> <li> @private</li> </ul>--> self.draw = function() { if(self.fillColor!=null) { self.canvas.fillStyle = self.fillColor; } self.canvas.strokeStyle = self.color; self.canvas.font = self.weight + " " + self.textSize+"px "+self.font; self.width = self.canvas.measureText(self.text).width; if(self.fillColor!=null) { self.canvas.fillText(self.text,0,0); } self.canvas.strokeText(self.text,0,0); }; <!--<ul><li></li> <li> Checks to see if a given point lies inside the bounds of the text.</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the Text</li> </ul>--> self.isInside = function(posX,posY) { var rPos = self.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; <!--if( posX>(self.textSize/2) && posX<self.textSize+(self.text.length*(self.textSize/2)) && posY>-(self.textSize/2) && posY<(self.textSize/2) ){ return true; } else { return false; } --> if( posX>0 && posX<self.textSize+(self.text.length*(self.textSize/2)) && posY>-(self.textSize) && posY<(self.textSize) ){ return true; } else { return false; } }; }; Giraffe.Text.prototype = new Giraffe.GraphicsObject(); //Deprecated Text = Giraffe.Text; <!-- End of: /OpenForum/Giraffe/Core/text.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/picture.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics Picture primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the picture is to be drawn on the x axis</li> <li> @param y {number} the position that the picture is to be drawn on the y axis</li> <li> @param src {string} the uri of the image to be used. The image can be in gif, png or jpeg format.</li> </ul>--> Giraffe.Picture = function(x,y,src) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Picture</li> </ul>--> var self = this; this.x=x; this.y=y; this.alpha = 1; this.type = "Picture"; this.img = new Image(); var workingCanvas = null; if(src) { this.img.src = src; } else { this.img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; } this.getWidth = function() { return this.img.naturalWidth; }; this.getHeight = function() { return this.img.naturalHeight; }; this.getPixel = function(x,y) { if(!workingCanvas) { workingCanvas = document.createElement('canvas'); } workingCanvas.width = this.getWidth(); workingCanvas.height = this.getHeight(); var context = workingCanvas.getContext('2d'); context.drawImage(this.img, 0, 0); var data = context.getImageData(x, y, 1, 1).data; return {red: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>, green: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>, blue: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>, alpha: data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a>}; }; var self = this; var superToJson = self.toJson; this.toJson = function() { var json = superToJson(self); json.img = {src: self.img.src}; return json; }; var superFromJson = self.fromJson; this.fromJson = function(json) { superFromJson(json); if(json.img) { self.img.src = json.img.src; } }; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { var gAlpha = 0; if(this.alpha!=1) { if(this.alpha==0) { return; } gAlpha = this.canvas.globalAlpha; this.canvas.globalAlpha = this.alpha; } this.canvas.strokeStyle = this.color; try{ this.canvas.drawImage(this.img,0,0); } catch(e) { } if(this.alpha!=1) { this.canvas.globalAlpha = gAlpha; } }; <!--<ul><li></li> <li> Checks to see if a given point lies inside the bounds of the picture.</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the picture</li> </ul>--> this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; if( posX>0 && posX<(this.img.width*this.scaleX) && posY>0 && posY<(this.img.height*this.scaleY) ){ return true; } else { return false; } }; }; Giraffe.Picture.prototype = new Giraffe.GraphicsObject(); //Deprecated Picture = Giraffe.Picture; <!-- End of: /OpenForum/Giraffe/Core/picture.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/polygon.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> </ul>--> Giraffe.Polygon = function(x,y) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Polygon</li> </ul>--> this.x=x; this.y=y; this.smooth = false; this.closed = true; this.type="Polygon"; this.points = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; this.addPoint = function(px,py) { this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.points.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.points.length does not exist. Click to create it.">this.points.length</a>=<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/px,py"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/px,py does not exist. Click to create it.">px,py</a>; return this; }; var self = this; var superToJson = self.toJson; this.toJson = function() { var json = superToJson(self); json.points = self.points; return json; }; var superFromJson = self.fromJson; self.fromJson = function(json,canvas) { superFromJson( json, canvas, self ); if(json.points) { for(var p=0;p<json.points.length;p++) { self.points.push( json.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a> ); } } }; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.beginPath(); if(this.fillColor!=null) { this.canvas.fillStyle = this.fillColor; } this.canvas.strokeStyle = this.color; this.canvas.moveTo(this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>,this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>); if(this.smooth === false) { for(var i=1;i<this.points.length;i++) { this.canvas.lineTo(this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>,this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>); } if(this.closed) { this.canvas.lineTo(this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>,this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>); } } else { var lastPoint = this.points.length; if(!closed) lastPoint--; for(var i=1;i<lastPoint ;i++) { var ia = i%this.points.length; var ib = (i+1)%this.points.length; var xc = (this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia does not exist. Click to create it.">ia</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a> + this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ib"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ib does not exist. Click to create it.">ib</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>) / 2; var yc = (this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia does not exist. Click to create it.">ia</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a> + this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ib"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ib does not exist. Click to create it.">ib</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>) / 2; this.canvas.quadraticCurveTo(this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia does not exist. Click to create it.">ia</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>, this.points<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/ia does not exist. Click to create it.">ia</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>, xc, yc); } } if(this.fillColor!=null) { this.canvas.fill(); } this.canvas.stroke(); }; }; Giraffe.Polygon.prototype = new Giraffe.GraphicsObject(); //Deprecated Polygon = Giraffe.Polygon; <!-- End of: /OpenForum/Giraffe/Core/polygon.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/regular-polygon.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> //ToDo <!-- End of: /OpenForum/Giraffe/Core/regular-polygon.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/star.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> //ToDo <!-- End of: /OpenForum/Giraffe/Core/star.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/curved-line.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> //ToDo <!-- End of: /OpenForum/Giraffe/Core/curved-line.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/rounded-rectangle.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics RoundedRectangle primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> <li> @param width (number) the width of the rectangle</li> <li> @param height (number) the height of the rectangle</li> <li> @param radius (number) the radius of the rectangle corners</li> </ul>--> Giraffe.RoundedRectangle = function(x,y,width,height,radius) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Rectangle</li> </ul>--> this.x=x; this.y=y; this.width=width; this.height=height; this.radius=radius; this.type="RoundedRectangle"; <!--<ul><li></li> <li> Checks to see if a given point lies inside the rectangle.</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the Rectangle</li> </ul>--> this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; if( posX>0 && posX<this.width && posY>0 && posY<this.height ){ return true; } else { return false; } }; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.beginPath(); if(this.fillColor!==null) { this.canvas.fillStyle = this.fillColor; } this.canvas.strokeStyle = this.color; this.canvas.moveTo(this.radius, 0); this.canvas.arcTo(this.width, 0, this.width, this.height, this.radius); this.canvas.arcTo(this.width, this.height, 0, this.height, this.radius); this.canvas.arcTo(0, this.height, 0, 0, this.radius); this.canvas.arcTo(0, 0, this.width, 0, this.radius); if(this.fillColor!==null) { this.canvas.fill(); } this.canvas.stroke(); }; }; Giraffe.RoundedRectangle.prototype = new Giraffe.GraphicsObject(); //Deprecated RoundedRectangle = Giraffe.RoundedRectangle; <!-- End of: /OpenForum/Giraffe/Core/rounded-rectangle.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/arc.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> </ul>--> Giraffe.Arc = function(x,y,startAngle,sweepAngle,radius) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf Arc</li> </ul>--> this.x=x; this.y=y; this.closed=true; this.startAngle=startAngle; this.sweepAngle=sweepAngle; this.radius=radius; this.type="Arc"; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.beginPath(); if(this.fillColor!=null) { this.canvas.fillStyle = this.fillColor; } var startAngleRad = this.startAngle*2*Math.PI/360; var sweepAngleRad = <p>this.startAngle+this.sweepAngle)%360)*2*Math.PI/360; this.canvas.strokeStyle = this.color; if(this.closed==true) { this.canvas.moveTo(0,0); this.canvas.lineTo( Math.cos(startAngleRad)*radius, Math.sin(startAngleRad)*radius ); } this.canvas.arc(0,0,this.radius,startAngleRad,sweepAngleRad,false); if(this.closed==true) { this.canvas.lineTo( 0,0 ); } this.canvas.closePath(); if(this.fillColor!=null) { this.canvas.fill(); } this.canvas.stroke(); }; this.setColor = function(color) { this.color = color; return this; }; this.setFillColor = function(fillColor) { this.fillColor= fillColor; return this; }; this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; var xl = posX; var yl = posY; var d = Math.pow( (xl*xl)+(yl*yl),0.5); if( d<this.radius ) { if(xl==0 && yl==0) return true; var a = Math.atan(yl/xl); if(xl>0) a=Math.PI+a; if(a<0) a=(Math.PI*2)+a; a = (a*180)/(Math.PI); if(a>=this.startAngle && a<=this.startAngle+this.sweepAngle) { return true; } else { return false; } } else { return false; } }; this.setClosed = function() { this.closed=true; return this; }; this.setOpen = function() { this.closed=false; return this; }; }; Giraffe.Arc.prototype = new Giraffe.GraphicsObject(); //Deprecated Arc = Giraffe.Arc; <!-- End of: /OpenForum/Giraffe/Core/arc.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/pixel-canvas.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a </li> </ul>--> Giraffe.PixelCanvas = function(x,y,width,height) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf PixelCanvas</li> </ul>--> this.x=x; this.y=y; this.width=width; this.height=height; var imageData = new ImageData(width,height); this.setPixel = function(x,y,r,g,b,a) { var cursor = (x+(y*width</p>*4; if(!g) { // Assume color object var color = r; r = color.red; g = color.green; b = color.blue; a = color.alpha; } imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor does not exist. Click to create it.">cursor</a> = r; imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+1 does not exist. Click to create it.">cursor+1</a> = g; imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+2 does not exist. Click to create it.">cursor+2</a> = b; imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+3 does not exist. Click to create it.">cursor+3</a> = a; }; this.getPixel = function(x,y) { var cursor = (x+(y*width))*4; return {red: imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor does not exist. Click to create it.">cursor</a>, green: imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+1 does not exist. Click to create it.">cursor+1</a>, blue: imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+2 does not exist. Click to create it.">cursor+2</a>, alpha: imageData.data<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/cursor+3 does not exist. Click to create it.">cursor+3</a>}; }; <!--<ul><li></li> <li> @private</li> </ul>--> this.draw = function() { this.canvas.putImageData(imageData,x,y); }; <!--<ul><li></li> <li> Checks to see if a given point lies inside the bounds of the .</li> <li> @param posX {number} the x axis of the point to check</li> <li> @param posY {number} the y axis of the point to check</li> <li> @returns true if the point lies within the picture</li> </ul>--> this.isInside = function(posX,posY) { var rPos = this.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; if( posX>0 && posX<(this.img.width*this.scaleX) && posY>0 && posY<(this.img.height*this.scaleY) ){ return true; } else { return false; } }; }; Giraffe.PixelCanvas.prototype = new Giraffe.GraphicsObject(); //Deprecated PixelCanvas = Giraffe.PixelCanvas; <!-- End of: /OpenForum/Giraffe/Core/pixel-canvas.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/composite.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics primative</li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> </ul>--> Giraffe.Composite = function(x,y,rotation) { var self = this; if(typeof rotation == "undefined") rotation = 0; self.rotation = rotation; self.x=x; self.y=y; self.parts = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; self.masked = false; self.type = "Composite"; self.excludeFromSave=false; var superToJson = self.toJson; self.toJson = function() { var json = superToJson(self); json.parts = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; if(self.excludeFromSave == true) return json; for(var p=0;p<self.parts.length;p++) { json.parts.push( self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>.toJson() ); } return json; }; var superFromJson = self.fromJson; self.fromJson = function(json,canvas) { superFromJson( json, canvas, self ); if(json.parts) { for(var p=0;p<json.parts.length;p++) { self.add( canvas.fromJson(json.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>,canvas) ); } } }; var setParent = function( composite, canvasParent ) { if(!composite.parts) return; composite.canvasParent = canvasParent; for(var p in composite.parts) { composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>.canvasParent = canvasParent; if( composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>.parts ) { setParent( composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/p does not exist. Click to create it.">p</a>, canvasParent ); } } }; self.add = function( part,id ) { if(part.canvasParent!=null) { return; } if(id) { self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/id"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/id does not exist. Click to create it.">id</a> = part; part.id = id; } else if(part.id) { self<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/id"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/id does not exist. Click to create it.">id</a> = part.id; } if( self.canvasParent ) { setParent( part, self.canvasParent ); } part.parent = this; self.parts.push(part); return self; }; self.remove = function( part ) { for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>==part) { part.canvasParent=null; part.parent = null; self.parts.splice(i,1); } } }; self.deconstruct = function() { for(var i=0;i<self.parts.length;i++) { var part = self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>; part.x += self.x; part.y += self.y; part.onMouseOver = self.onMouseOver; part.onMouseOut = self.onMouseOut; part.onMousePressed = self.onMousePressed; part.onMouseReleased = self.onMouseReleased; part.onClick = self.onClick; part.rotation += self.rotation; part.canvasParent=null; part.parent = null; self.canvasParent.add( part ); } self.parts = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; }; <!--<ul><li></li> <li> @private</li> </ul>--> self.draw = function() { var hasMask = false; for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.canvasParent==null) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.canvasParent=self.canvasParent; self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.canvas=self.canvas; } if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible==true) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>._repaint(); if(i==0 && self.masked==true) { hasMask = true; self.canvasParent._store(); self.canvas.clip(); } } } if(hasMask) { self.canvasParent._restore(); } }; self.animate = function(frame) { for(var i=0;i<self.parts.length;i++) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.animate(frame); } }; self.isInside = function(posX,posY) { var rPos = self.getRelativePosition(posX,posY); posX = rPos.x; posY = rPos.y; for(var i=self.parts.length-1;i>=0;i--) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible===true && self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.isInside(posX,posY)) { return true; } } return false; }; self.onClick = function(posX,posY) { var relativePos = self.getRelativePosition(posX,posY); for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible===true && self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.isInside(relativePos.x,relativePos.y)) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onClick(relativePos.x,relativePos.y); } } return false; }; self.onMouseOver = function(posX,posY) { var relativePos = self.getRelativePosition(posX,posY); for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible===true && self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.isInside(relativePos.x,relativePos.y)) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onMouseOver(relativePos.x,relativePos.y); self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.mouseOver=true; } else if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.mouseOver==true) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.mouseOver=false; self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onMouseOut(relativePos.x,relativePos.y); } } }; self.onMouseOut = function(posX,posY) { var relativePos = self.getRelativePosition(posX,posY); for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.mouseOver==true) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.mouseOver=false; self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onMouseOut(relativePos.x,relativePos.y); } } }; self.onMousePressed = function(posX,posY) { var relativePos = self.getRelativePosition(posX,posY); for(var i=0;i<self.parts.length;i++) { if(self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.visible===true && self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.isInside(relativePos.x,relativePos.y)) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onMousePressed(relativePos.x,relativePos.y); } } }; self.onMouseReleased = function(posX,posY) { var relativePos = self.getRelativePosition(posX,posY); for(var i=0;i<self.parts.length;i++) { self.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.onMouseReleased(relativePos.x,relativePos.y); } }; }; Giraffe.Composite.prototype = new Giraffe.GraphicsObject(); //Deprecated Composite = Giraffe.Composite; <!-- End of: /OpenForum/Giraffe/Core/composite.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/radial-color.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> <!--<ul><li></li> <li> Defines a graphics primative</li> <li> @description</li> <li> <iframe src="/web/giraffe/examples/giraffe-examples-home-page.html" width="500" height="500"></iframe></li> <li> @class</li> <li> @augments GraphicsObject</li> <li> @param x {number} the position that the ... is to be drawn on the x axis</li> <li> @param y {number} the position that the ... is to be drawn on the y axis</li> </ul>--> Giraffe.RadialColor = function(canvas,color1,color2,x,y,radius) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf RadialColor</li> </ul>--> this.canvas = canvas.canvasContext; this.colorStop = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,0,0,radius"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,0,0,radius does not exist. Click to create it.">0,color1,0,0,radius</a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x,y,0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x,y,0 does not exist. Click to create it.">1,color2,x,y,0</a>; this.getColor = function() { gradient = this.canvas.createRadialGradient( this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/4"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/4 does not exist. Click to create it.">4</a>, this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/4"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/4 does not exist. Click to create it.">4</a> ); var i=0; for(i=0;i<this.colorStop.length;i++) { gradient.addColorStop(this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>); } return gradient; }; this.toJson = function() { return {color1: color1, color2: color2, x: x, y: y, radius: radius}; }; this.fromJson = function( json ) { var color1 = json.color1; var color2 = json.color2; var x = json.x; var y = json.y; var radius = json.radius; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,0,0,radius"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,0,0,radius does not exist. Click to create it.">0,color1,0,0,radius</a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x,y,0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x,y,0 does not exist. Click to create it.">1,color2,x,y,0</a>; }; }; //Deprecated RadialColor = Giraffe.RadialColor; <!-- End of: /OpenForum/Giraffe/Core/radial-color.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/gradient-color.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> function GradientColor(canvas,color1,color2,x1,y1,x2,y2) { <!--<ul><li><ol><li>@+</li></ol></li> <li> @memberOf RadialColor</li> </ul>--> this.canvas = canvas.canvasContext; this.colorStop = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,x1,y1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,x1,y1 does not exist. Click to create it.">0,color1,x1,y1</a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x2,y2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x2,y2 does not exist. Click to create it.">1,color2,x2,y2</a>; this.getColor = function() { gradient = this.canvas.createLinearGradient( this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a>, this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/2 does not exist. Click to create it.">2</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/3 does not exist. Click to create it.">3</a> ); var i=0; for(i=0;i<this.colorStop.length;i++) { gradient.addColorStop(this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>,this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a><a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>); } return gradient; }; this.toJson = function() { return {color1: color1, x1: x1, y1: y1, color2: color2, x2: x2, y2: y2}; }; this.fromJson = function( json ) { var color1 = json.color1; var color2 = json.color2; var x1 = json.x1; var y1 = json.y1; var x2 = json.x2; var y2 = json.y2; this.colorStop = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,x1,y1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,color1,x1,y1 does not exist. Click to create it.">0,color1,x1,y1</a>; this.colorStop<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a> = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x2,y2"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1,color2,x2,y2 does not exist. Click to create it.">1,color2,x2,y2</a>; }; } <!-- End of: /OpenForum/Giraffe/Core/gradient-color.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/shadow.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> Giraffe.Shadow = function() { this.color = '#999'; this.blur = 20; this.offsetX = 15; this.offsetY = 15; this.toJson = function() { return {color: this.color, blur: this.blur, offsetX: this.offsetX, offsetY: this.offsetY}; }; this.fromJson = function( json ) { this.color = json.color; this.blur = json.blur; this.offsetX = json.offsetX; this.offsetY = json.offsetY; }; }; //Deprecated Shadow = Giraffe.Shadow; <!-- End of: /OpenForum/Giraffe/Core/shadow.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/line-style.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> Giraffe.LineStyle = function() { this.thickness=1.5; this.endCap = 'round'; this.type = "LineStyle"; this.setThickness = function(thickness) { this.thickness = thickness; return this; }; this.setEndCap = function(endCap) { this.endCap = endCap; return this; }; this.toJson = function() { return {thickness: this.thickness, endCap: this.endCap, type: this.type}; }; this.fromJson = function( json ) { this.thickness = json.thickness; this.endCap = json.endCap; this.type = json.type; }; }; //Deprecated LineStyle = Giraffe.LineStyle; <!-- End of: /OpenForum/Giraffe/Core/line-style.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-animation.js--> //==============================================================================================================// Giraffe.setAnimated = function(canvas) { canvas.frame = 0; canvas.timer = null; canvas.frames = 0; canvas.looped = true; canvas.fps = 0; canvas.animationListeners = new Array(); canvas.animated = false; canvas.addAnimationListener = function(listener) { this.animationListeners<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.animationListeners.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.animationListeners.length does not exist. Click to create it.">this.animationListeners.length</a>=listener; }; canvas.removeAnimationListener = function(listener) { for(this.loop=0;this.loop<this.animationListeners.length;this.loop++) { if(this.animationListeners<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>==listener) { this.animationListeners.splice(this.loop,1); } } }; canvas.startAnimation = function(fps,frames,looped) { this.animated = true; this.frame = 0; this.frames = frames; this.looped = looped; this.fps = fps; this.timer = setTimeout("Giraffe.canvases<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/<br/>""+this.id+"<br/>""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/<br/>""+this.id+"<br/>" does not exist. Click to create it."><br/>""+this.id+"<br/>"</a>.animate();",1000/this.fps); }; canvas.stopAnimation = function() { this.animated = false; }; canvas.processing = false; canvas.animate = function() { if(this.animated == false) return; if(this.processing===true) { console.log("running slow"); return; } this.processing = true; try{ for(this.loop=0;this.loop<this.animationListeners.length;this.loop++) { this.animationListeners<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.processFrame(this.frame); } for(this.loop=0;this.loop<this.graphicsObjects.length;this.loop++) { this.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.animate(this.frame); } this.repaint(); this.frame++; if(this.frame>=this.frames) { if(this.looped==true) { this.frame=0; } else { this.stopAnimation(); } } } catch(e) { console.log(e); } this.processing = false; this.timer = setTimeout("Giraffe.canvases<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/<br/>""+this.id+"<br/>""target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/<br/>""+this.id+"<br/>" does not exist. Click to create it."><br/>""+this.id+"<br/>"</a>.animate();",1000/this.fps); }; }; <!-- End of: /OpenForum/Giraffe/Core/giraffe-animation.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-transition.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> Giraffe.Transition = function(target,frames) { this.frames = frames; this.target = target; this.canvas = null; this.currentFrame=0; this.play = false; this.start = function() { this.register(); this.currentFrame=0; this.play=true; }; this.process = function(frame){}; this.processFrame = function() { if(this.play==false) { return; }; this.currentFrame++; if(this.currentFrame==this.frames+1) { this.unregister(); this.doNext(); } if(this.currentFrame>this.frames) { return false; } this.process(this.currentFrame); }; this.doNext = function(){}; this.register = function(){ this.canvas.addAnimationListener(this); }; this.unregister = function(){ this.canvas.removeAnimationListener(this); }; }; <!-- End of: /OpenForum/Giraffe/Core/giraffe-transition.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-transition-flip.js--> //==============================================================================================================// <!--<ul><li></li> <li> Creates an animation sequence that squashes the x axis of a GraphicsObject</li> <li> @class</li> <li> @param target {GraphicsObject} the GraphicsObject to apply the animation to</li> <li> @param frames integer the number of frames the animation should last for</li> </ul>--> Giraffe.FlipOutX = function(target,frames) { this.frames = frames; this.target = target; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; <!--<ul><li></li> <li> @private</li> </ul>--> this.process = function(frame) { this.target.scaleX = 1-<p>1*frame)/this.frames); }; }; Giraffe.FlipOutX.prototype = new Giraffe.Transition(); Giraffe.FlipInX = function(target,frames) { this.frames = frames; this.target = target; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame) { this.target.scaleX = (1*frame)/this.frames; }; }; Giraffe.FlipInX.prototype = new Giraffe.Transition(); Giraffe.FlipOutY = function(target,frames) { this.frames = frames; this.target = target; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame){ this.target.scaleY = 1-<p></p>*frame)/this.frames); }; }; Giraffe.FlipOutY.prototype = new Giraffe.Transition(); Giraffe.FlipInY = function(target,frames) { this.frames = frames; this.target = target; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame) { this.target.scaleY = (1*frame)/this.frames; }; }; Giraffe.FlipInY.prototype = new Giraffe.Transition(); <!-- End of: /OpenForum/Giraffe/Core/giraffe-transition-flip.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-transition-move.js--> //==============================================================================================================// Giraffe.MoveSequence = function(target,frames,matrix) { this.frames = frames; this.target = target; this.matrix = matrix; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame) { if(this.matrix) { this.target.x+=this.matrix<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.X"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.X does not exist. Click to create it.">Giraffe.X</a>; this.target.y+=this.matrix<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.Y"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.Y does not exist. Click to create it.">Giraffe.Y</a>; } else { this.target.x+=this.target.vx; this.target.y+=this.target.vy; } }; }; Giraffe.MoveSequence.prototype = new Giraffe.Transition(); <!-- End of: /OpenForum/Giraffe/Core/giraffe-transition-move.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-transition-rotate.js--> //==============================================================================================================// Giraffe.RotationSequence = function(target,frames,steps) { this.frames = frames; this.target = target; this.steps = steps; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame) { this.target.setRotation( this.target.rotation+(Giraffe.DEG_TO_RAD*this.steps) ); }; }; Giraffe.RotationSequence.prototype = new Giraffe.Transition(); <!-- End of: /OpenForum/Giraffe/Core/giraffe-transition-rotate.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-transition-explode.js--> //==============================================================================================================// Giraffe.ExplodeSequence = function(target,frames) { this.frames = frames; this.target = target; this.canvas = target.canvasParent; this.register(); this.currentFrame=0; this.process = function(frame) { if(!this.parts) { this.parts = getExplodingParts(target); } var hasMinVelocity = false; for(i=0;i<this.parts.length;i++) { this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.x+=this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vx; this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.y+=this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vy; this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vx*=0.9; this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vy*=0.9; if(this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vx>0.5 || this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vx<-0.5 || this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vy>0.5 || this.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vy<-0.5) { hasMinVelocity=true; } } if(hasMinVelocity==false) { this.currentFrame = this.frames; } }; var getExplodingParts = function(composite,parts) { if(!parts) { var parts = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; } for(var i=0;i<composite.parts.length;i++) { if(composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.parts) { //is sub composite getExplodingParts(composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>,parts); } composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vx=composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.x+<p></p>ath.random()*10)-5); composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.vy=composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.y+<p></p>ath.random()*10)-5); parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/parts.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/parts.length does not exist. Click to create it.">parts.length</a>=composite.parts<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>; } return parts; }; }; Giraffe.ExplodeSequence.prototype = new Giraffe.Transition(); <!-- End of: /OpenForum/Giraffe/Core/giraffe-transition-explode.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-interactive.js--> //==============================================================================================================// <!--<ul><li> Author: </li> <li> Description: </li> </ul>--> Giraffe.Interactive = { shiftKeyDown : false, controlKeyDown : false, keyDown : null, keyDownListeners : <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>, keyUpListeners : <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>, init : function() { document.onkeydown = Giraffe.Interactive.keyDownHandler; document.onkeyup = Giraffe.Interactive.keyUpHandler; shiftKeyDown = false; controlKeyDown = false; }, keyDownHandler : function(e) { var pressedKey; if (document.all) { e = window.event; pressedKey = e.keyCode; } if (e.which) { pressedKey = e.which; } if(pressedKey===16) { Giraffe.Interactive.shiftKeyDown=true; } else if(pressedKey===17) { Giraffe.Interactive.controlKeyDown=true; } Giraffe.Interactive.keyDown = pressedKey; for(var l in Giraffe.Interactive.keyDownListeners) { Giraffe.Interactive.keyDownListeners<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/l"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/l does not exist. Click to create it.">l</a>(pressedKey); } }, keyUpHandler : function(e) { var pressedKey; if (document.all) { e = window.event; pressedKey = e.keyCode; } if (e.which) { pressedKey = e.which; } if(pressedKey===16) { Giraffe.Interactive.shiftKeyDown=false; } else if(pressedKey===17) { Giraffe.Interactive.controlKeyDown=false; } for(var l in Giraffe.Interactive.keyUpListeners) { Giraffe.Interactive.keyUpListeners<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/l"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/l does not exist. Click to create it.">l</a>(pressedKey); } Giraffe.Interactive.keyDown = null; }, isDragging : function() { if( self.dragging && self.dragging.length>0 ) { return true; } else { return false; } }, setInteractive : function(canvas) { var canvas = canvas; canvas.convertEvent = function(event,element) { position = getPosition(element); x=event.x-position<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.X"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.X does not exist. Click to create it.">Giraffe.X</a>+window.scrollX; y=event.y-position<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.Y"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/Giraffe.Y does not exist. Click to create it.">Giraffe.Y</a>+window.scrollY; x = x / canvas.scaleX; y = y / canvas.scaleY; return { x : x, y : y }; }; canvas.onClick = function(event) { event = canvas.convertEvent(event,canvas.canvasElement); for(var loop=canvas.graphicsObjects.length-1;loop>=0;loop--) { if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop does not exist. Click to create it.">loop</a>.visible===true && canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop does not exist. Click to create it.">loop</a>.isInside(event.x,event.y</p> { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/loop does not exist. Click to create it.">loop</a>.onClick(event.x,event.y); } } }; canvas.onMouseDown = function(event) { event = canvas.convertEvent(event,canvas.canvasElement); if(canvas.dragAndDrop==true) { canvas.dragStart=<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/event.x,event.y"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/event.x,event.y does not exist. Click to create it.">event.x,event.y</a>; canvas.lastDx = 0; canvas.lastDy = 0; canvas.dragging=new Array(); } for(var d = canvas.draggable.length-1; d>=0 ; d--) { dragTarget=canvas.draggable<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/d"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/d does not exist. Click to create it.">d</a>; var root = dragTarget; var stack = <a href="/OpenForum/Giraffe/Core/" target="newTab"><img src='/OpenForum/Images/icons/png/link_go.png' /></a>; while( root.parent ) { root = root.parent; stack.push(root); } var x = event.x; var y = event.y; for( var i = stack.length-1; i>=0; i-- ) { var p = stack<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/i does not exist. Click to create it.">i</a>.getRelativePosition( x,y ); x = p.x; y = p.y; } if(dragTarget.isInside( x, y )) { var included = false; for(var check in canvas.dragging) { check = canvas.dragging<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/check"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/check does not exist. Click to create it.">check</a>; if(check==dragTarget) { included=true; break; } } if(included==true) { continue; } dragTarget.dragging=true; canvas.dragging<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/canvas.dragging.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/canvas.dragging.length does not exist. Click to create it.">canvas.dragging.length</a>=dragTarget; dragTarget.dragStart=<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget.x,dragTarget.y"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget.x,dragTarget.y does not exist. Click to create it.">dragTarget.x,dragTarget.y</a>; if(Giraffe.Interactive.shiftKeyDown==false) break; } } for(this.loop=0;this.loop<canvas.graphicsObjects.length;this.loop++) { if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.visible===true && canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.isInside(event.x,event.y)) { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onMousePressed(event.x,event.y); } } canvas.onMousePressed(event.x,event.y); }; canvas.onMousePressed = function(x,y) {}; canvas.onMouseReleased = function(x,y) {}; canvas.setDragging = function(dragTarget) { // alert("Here: "+dragTarget.x+","+dragTarget.y); dragTarget.dragging=true; canvas.dragging<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/canvas.dragging.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/canvas.dragging.length does not exist. Click to create it.">canvas.dragging.length</a>=dragTarget; dragTarget.dragStart=<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget.x,dragTarget.y"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget.x,dragTarget.y does not exist. Click to create it.">dragTarget.x,dragTarget.y</a>; }; canvas.onMouseUp = function(event) { event = canvas.convertEvent(event,canvas.canvasElement); if(canvas.dragAndDrop==true && canvas.dragging.length>0) { for(this.loop=0;this.loop<canvas.graphicsObjects.length;this.loop++) { if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.dragging) { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.dragging=false; } if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.isInside(event.x,event.y)) { if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onCatch) { for(var dropped in canvas.dragging) { dropped = canvas.dragging<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dropped"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dropped does not exist. Click to create it.">dropped</a>; if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>==dropped) { continue; } canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onCatch(dropped,event.x,event.y); } } } } canvas.dragging=new Array(); } for(this.loop=0;this.loop<canvas.graphicsObjects.length;this.loop++) { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onMouseReleased(event.x,event.y); } canvas.onMouseReleased(event.x,event.y); }; canvas.onMouseMoved = function(event) { event = canvas.convertEvent(event,canvas.canvasElement); if(canvas.dragAndDrop==true) { var dragDX = event.x-canvas.dragStart<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>; var dragDY = event.y-canvas.dragStart<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/1 does not exist. Click to create it.">1</a>; for(var dragTarget in canvas.dragging) { dragTarget = canvas.dragging<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/dragTarget does not exist. Click to create it.">dragTarget</a>; var scaleX = 1; var scaleY = 1; var parent = dragTarget.parent; while( parent ) { scaleX = scaleX * parent.scaleX; scaleY = scaleY * parent.scaleY; parent = parent.parent; } dragTarget.x = dragTarget.x+<p>dragDX-canvas.lastDx)/scaleY); dragTarget.y = dragTarget.y+<p></p>ragDY-canvas.lastDy)/scaleX); } canvas.lastDx = dragDX; canvas.lastDy = dragDY; } for(this.loop=0;this.loop<canvas.graphicsObjects.length;this.loop++) { if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.isInside(event.x,event.y</p> { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.mouseOver=true; canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onMouseOver(event.x,event.y); } else if(canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.mouseOver==true) { canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.mouseOver=false; canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.loop does not exist. Click to create it.">this.loop</a>.onMouseOut(event.x,event.y); } } canvas.onMouseOver(event.x,event.y); }; canvas.onMouseOver = function(x,y){}; canvas.makeDraggable = function(object) { this.dragAndDrop = true; this.draggable<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.draggable.length"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.draggable.length does not exist. Click to create it.">this.draggable.length</a>=object; object.draggable = true; }; canvas.removeDraggable = function(object) { //this.dragAndDrop = false; var foundIndex = -1; for(var index in this.draggable) { if(this.draggable<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/index"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/index does not exist. Click to create it.">index</a>==object) { foundIndex = index; break; } } if(foundIndex!=-1) { object.draggable = false; this.draggable.splice(foundIndex,1); } }; canvas.dragStart = <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0,0 does not exist. Click to create it.">0,0</a>; canvas.dragging = new Array(); canvas.draggable = new Array(); canvas.dragAndDrop = false; canvas.canvasElement.onmousemove = canvas.onMouseMoved; canvas.canvasElement.onmouseup = canvas.onMouseUp; canvas.canvasElement.onmousedown = canvas.onMouseDown; canvas.canvasElement.onclick = canvas.onClick; } }; Giraffe.Interactive.init(); <!-- behaviours --> function setReveal(target,reveal) { target.onMouseOver = function(x,y) { reveal.visible=true; }; target.onMouseOut = function(x,y) { reveal.visible=false; }; reveal.visible=false; } function getPosition(obj) { this.curleft = this.curtop = 0; if (obj.offsetParent) { this.curleft = obj.offsetLeft; this.curtop = obj.offsetTop; obj = obj.offsetParent; while (obj) { this.curleft += obj.offsetLeft; this.curtop += obj.offsetTop; obj = obj.offsetParent; } } return <a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.curleft,this.curtop"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/this.curleft,this.curtop does not exist. Click to create it.">this.curleft,this.curtop</a>; } <!-- End of: /OpenForum/Giraffe/Core/giraffe-interactive.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-tablet.js--> //==============================================================================================================// Giraffe.Tablet = { enableTouch : function(canvas) { var canvas = canvas; canvas.canvasElement.addEventListener("touchstart", function(event) { event.preventDefault(); canvas.onMouseDown( {x:event.targetTouches<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>.pageX,y:event.targetTouches<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>.pageY } ); }, false ); canvas.canvasElement.addEventListener("touchmove", function(event) { event.preventDefault(); canvas.onMouseMoved( {x:event.targetTouches<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>.pageX,y:event.targetTouches<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/0 does not exist. Click to create it.">0</a>.pageY } ); }, false ); canvas.canvasElement.addEventListener("touchend", function(event) { event.preventDefault(); canvas.onMouseUp( {x:0,y:0} ); }, false ); } }; var tiltMouseX=0; var tiltMouseY=0; var tiltMouseDown=false; Giraffe.Tablet.convertRotationToMouse = function(canvas) { Giraffe.Tablet.noramlizeOrientationEvents(); deviceOrientationHandler = function(tiltLR, tiltFB, dir, motUD) { // var canvas = canvas; console.log( "event: tiltLR="+tiltLR+", tiltFB="+tiltFB+", dir="+dir+", motUD="+motUD ); var mouseClick = false; if(tiltLR!=0 && tiltLR!=null) { if(tiltMouseDown==false) { mouseClick=true; } tiltMouseX+=tiltLR; } if(tiltFB!=0 && tiltFB!=null) { if(tiltMouseDown==false) { mouseClick=true; } tiltMouseY+=tiltFB; } if(mouseClick==true) { tiltMouseDown=true; canvas.onMouseDown( {x:tiltMouseX,y:tiltMouseY } ); } else if(tiltLR==0 && tiltFB==0) { tiltMouseDown=false; canvas.onMouseUp( {x:tiltMouseX,y:tiltMouseY } ); } canvas.onMouseMoved( {x:tiltMouseX,y:tiltMouseY } ); }; }; //http://www.html5rocks.com/en/tutorials/device/orientation/ Giraffe.Tablet.noramlizeOrientationEvents = function() { if (window.DeviceOrientationEvent) { // Listen for the deviceorientation event and handle the raw data window.addEventListener('deviceorientation', function(eventData) { // gamma is the left-to-right tilt in degrees, where right is positive var tiltLR = eventData.gamma; // beta is the front-to-back tilt in degrees, where front is positive var tiltFB = eventData.beta; // alpha is the compass direction the device is facing in degrees var dir = eventData.alpha; // deviceorientation does not provide this data var motUD = null; // call our orientation event handler deviceOrientationHandler(tiltLR, tiltFB, dir, motUD); }, false); } else if (window.OrientationEvent) { window.addEventListener('MozOrientation', function(eventData) { // x is the left-to-right tilt from -1 to +1, so we need to convert to degrees var tiltLR = eventData.x * 90; // y is the front-to-back tilt from -1 to +1, so we need to convert to degrees // We also need to invert the value so tilting the device towards us (forward) // results in a positive value. var tiltFB = eventData.y * -90; // MozOrientation does not provide this data var dir = null; // z is the vertical acceleration of the device var motUD = eventData.z; // call our orientation event handler deviceOrientationHandler(tiltLR, tiltFB, dir, motUD); }, false); } else { console.log( "Not supported on your device or browser." ); } } <!-- End of: /OpenForum/Giraffe/Core/giraffe-tablet.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/giraffe-quick-start.js--> //==============================================================================================================// Giraffe.quickStart = function( canvasId, fullscreen ) { var canvas = document.getElementById(canvasId); if( fullscreen ) { try { if (canvas.requestFullscreen) { canvas.requestFullscreen(); } else if (canvas.webkitRequestFullscreen) { canvas.webkitRequestFullscreen(); } else if (canvas.mozRequestFullScreen) { canvas.mozRequestFullScreen(); } else if (canvas.msRequestFullscreen) { canvas.msRequestFullscreen(); } } catch(e) { } document.body.style.overflow="hidden"; canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; window.scrollTo(0,1); } var giraffeCanvas = new Canvas( canvasId ); // Register html canvas element Giraffe.Interactive.setInteractive(giraffeCanvas); // If mouse interaction required Giraffe.setAnimated(giraffeCanvas); // If animation required giraffeCanvas.startAnimation(20,100,true); // frames per second, frame count in loop, looped giraffeCanvas.width = canvas.width; giraffeCanvas.height = canvas.height; return giraffeCanvas; }; <!-- End of: /OpenForum/Giraffe/Core/giraffe-quick-start.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/select-box.js--> //==============================================================================================================// Giraffe.addSelectBox = function(canvas) { var selectBox = new RoundedRectangle(0,0,10,10,5).setColor("red").setFillColor("rgba(255,0,0,0.5)"); canvas.selectBox = selectBox; canvas.onMousePressed = function(x,y) { if(canvas.dragging.length==0) { selectBox.x = x; selectBox.y = y; selectBox.width = 0; selectBox.height = 0; selectBox.visible = true; } }; canvas.selectBox.callBack = function() {}; canvas.onMouseOver = function(x,y) { if(selectBox.visible) { if(canvas.dragging.length==0) { selectBox.width = x-selectBox.x; selectBox.height = y-selectBox.y; } else { selectBox.visible = false; } } }; canvas.onMouseReleased = function() { if(selectBox.visible) { selectBox.visible = false; selectBox.callBack( selectBox ); } }; selectBox.visible = false; canvas.add( selectBox ); }; <!-- End of: /OpenForum/Giraffe/Core/select-box.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/snap-to-grid.js--> //==============================================================================================================// Giraffe.addSnapToGrid = function(canvas) { var grid = new Composite(0,0); for(var x=0;x<canvas.width;x+=20) { grid.add(new Line(x,0,0,canvas.height)); } for(var y=0;y<canvas.height;y+=20) { grid.add(new Line(0,y,canvas.width,0)); } canvas.add(grid); canvas.grid = grid; grid.animate = function() { for(var gi in canvas.graphicsObjects) { var g = canvas.graphicsObjects<a href="/OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/gi"target="editor" style="color: red" title="The page /OpenForum/Editor?pageName=/OpenForum/Giraffe/Core/gi does not exist. Click to create it.">gi</a>; if(g===this) continue; g.x = Math.round(g.x/20)*20; g.y = Math.round(g.y/20)*20; } }; }; <!-- End of: /OpenForum/Giraffe/Core/snap-to-grid.js--> //==============================================================================================================// //==============================================================================================================// <!-- Source: /OpenForum/Giraffe/Core/right-click.js--> //==============================================================================================================// Giraffe.addRightClick = function(canvas) { canvas.addEventListener('contextmenu', function(ev) { ev.preventDefault(); //alert('success!'); return false; }, false); }; <!-- End of: /OpenForum/Giraffe/Core/right-click.js--> //==============================================================================================================// <!--End Extension InsertFile pageName="/OpenForum/Giraffe" fileName="giraffe.js" -->

---

Child Pages

• Version

---

Build Script

<!--Extension InsertFile pageName="/OpenForum/Giraffe/Core" fileName="script.build.json" -->{ "version": "2.8.33", "targetFile": "/OpenForum/Giraffe/giraffe.js", "versionFile": "/OpenForum/Giraffe/Core/Version/giraffe.js", "steps": <a href=" { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-header.js", "index": "0" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-core.js", "index": "1" }, { "action": "replace", "searchFor": "&version;", "replaceWith": "$version", "ofIndex": "1", "index": "2" }, { "action": "replace", "searchFor": "&date;", "replaceWith": "$date", "ofIndex": "1", "index": "3" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-canvas.js", "index": "4" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-object.js", "index": "5" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/circle.js", "index": "6" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/rectangle.js", "index": "7" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/line.js", "index": "8" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/text.js", "index": "9" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/picture.js", "index": "10" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/polygon.js", "index": "11" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/regular-polygon.js", "index": "12" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/star.js", "index": "13" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/curved-line.js", "index": "14" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/rounded-rectangle.js", "index": "15" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/arc.js", "index": "16" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/pixel-canvas.js", "index": "17" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/composite.js", "index": "18" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/radial-color.js", "index": "19" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/gradient-color.js", "index": "20" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/shadow.js", "index": "21" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/line-style.js", "index": "22" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-animation.js", "index": "23" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition.js", "index": "24" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-flip.js", "index": "25" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-move.js", "index": "26" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-rotate.js", "index": "27" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-explode.js", "index": "28" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-interactive.js", "index": "29" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-tablet.js", "index": "30" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-quick-start.js", "index": "31", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/select-box.js", "index": "32", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/snap-to-grid.js", "index": "33", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/right-click.js", "index": "34", "searchFor": "", "replaceWith": "", "data": "" } " target="external_page"> { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-header.js", "index": "0" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-core.js", "index": "1" }, { "action": "replace", "searchFor": "&version;", "replaceWith": "$version", "ofIndex": "1", "index": "2" }, { "action": "replace", "searchFor": "&date;", "replaceWith": "$date", "ofIndex": "1", "index": "3" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-canvas.js", "index": "4" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-object.js", "index": "5" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/circle.js", "index": "6" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/rectangle.js", "index": "7" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/line.js", "index": "8" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/text.js", "index": "9" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/picture.js", "index": "10" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/polygon.js", "index": "11" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/regular-polygon.js", "index": "12" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/star.js", "index": "13" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/curved-line.js", "index": "14" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/rounded-rectangle.js", "index": "15" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/arc.js", "index": "16" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/pixel-canvas.js", "index": "17" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/composite.js", "index": "18" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/radial-color.js", "index": "19" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/gradient-color.js", "index": "20" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/shadow.js", "index": "21" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/line-style.js", "index": "22" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-animation.js", "index": "23" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition.js", "index": "24" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-flip.js", "index": "25" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-move.js", "index": "26" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-rotate.js", "index": "27" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-transition-explode.js", "index": "28" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-interactive.js", "index": "29" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-tablet.js", "index": "30" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/giraffe-quick-start.js", "index": "31", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/select-box.js", "index": "32", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/snap-to-grid.js", "index": "33", "searchFor": "", "replaceWith": "", "data": "" }, { "action": "append", "file": "/OpenForum/Giraffe/Core/right-click.js", "index": "34", "searchFor": "", "replaceWith": "", "data": "" } </a> }<!--End Extension InsertFile pageName="/OpenForum/Giraffe/Core" fileName="script.build.json" -->

---

Script elements

• /OpenForum/Giraffe/Core/line.js
• /OpenForum/Giraffe/Core/rectangle.js
• /OpenForum/Giraffe/Core/curved-line.js
• /OpenForum/Giraffe/Core/data.json
• /OpenForum/Giraffe/Core/polygon.js
• /OpenForum/Giraffe/Core/giraffe-quick-start.js
• /OpenForum/Giraffe/Core/editor-config.json
• /OpenForum/Giraffe/Core/circle.js
• /OpenForum/Giraffe/Core/composite.js
• /OpenForum/Giraffe/Core/picture.js
• /OpenForum/Giraffe/Core/star.js
• /OpenForum/Giraffe/Core/gradient-color.js
• /OpenForum/Giraffe/Core/select-box.js
• /OpenForum/Giraffe/Core/page.js
• /OpenForum/Giraffe/Core/giraffe.build.json
• /OpenForum/Giraffe/Core/snap-to-grid.js
• /OpenForum/Giraffe/Core/text.js
• /OpenForum/Giraffe/Core/giraffe-transition-rotate.js
• /OpenForum/Giraffe/Core/giraffe-transition-explode.js
• /OpenForum/Giraffe/Core/giraffe-core.js
• /OpenForum/Giraffe/Core/giraffe.help.js
• /OpenForum/Giraffe/Core/radial-color.js
• /OpenForum/Giraffe/Core/arc.js
• /OpenForum/Giraffe/Core/line-style.js
• /OpenForum/Giraffe/Core/pixel-canvas.js
• /OpenForum/Giraffe/Core/giraffe-header.js
• /OpenForum/Giraffe/Core/script.build.json
• /OpenForum/Giraffe/Core/regular-polygon.js
• /OpenForum/Giraffe/Core/giraffe-transition-move.js
• /OpenForum/Giraffe/Core/giraffe-tablet.js
• /OpenForum/Giraffe/Core/giraffe-transition.js
• /OpenForum/Giraffe/Core/giraffe-canvas.js
• /OpenForum/Giraffe/Core/giraffe-animation.js
• /OpenForum/Giraffe/Core/giraffe-interactive.js
• /OpenForum/Giraffe/Core/right-click.js
• /OpenForum/Giraffe/Core/giraffe-transition-flip.js
• /OpenForum/Giraffe/Core/shadow.js
• /OpenForum/Giraffe/Core/rounded-rectangle.js
• /OpenForum/Giraffe/Core/giraffe-object.js