Biojs.RaphaelCanvas showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
This is the description of the RaphaelCanvas component. This component provides pan/zoom functionality over Raphael's paper object,
and saves repitition of development effort involved in pan/zoom in other components.
Version
1.0.0.
To get the above Biojs.RaphaelCanvas to work on your page, you need to do the following:
- Include the file Biojs.RaphaelCanvas.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/graphics/raphael-2.1.0.js">
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.RaphaelCanvas into.
window.onload = function() { var instance = new Biojs.RaphaelCanvas({ divid:"YourOwnDivId", dimension:500 }); instance.testSetup(); };
Required Parameters
-
divid | {String}
the div in which the canvas should be created.
-
dimension | {Number}
the side of the square canvas
Optional Parameters
event2paperxy
Parameters:
-
e
init
makeZoomPannable
recordMousedown
Parameters:
-
e
setVbox
Parameters:
-
x
-
y
-
dim
testSetup
zoompan
Parameters:
-
e
zoompanMouseactivity
Parameters:
-
e
onClick
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{int}
selected
Selected character.
Example :
instance.onClick(
function( objEvent ) {
alert("The character " + objEvent.selected + " was clicked.");
}
);
onHelloSelected
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{int}
textSelected
Selected text, will be 'Hello' obviously.
Example :
instance.onHelloSelected(
function( objEvent ) {
alert("The word " + objEvent.textSelected + " was selected.");
}
);