Creates a simple shape based on canvas. Extended by excanvas which allows you to draw your shape under IE-Browser. You can create different shape types and you are able to extend the class by other shape types. Please feel free, to extend and improve this class!
Demo: http://jsfiddle.net/remram/UkDTE/
Import the plugin
<script type="text/javascript" src="{yourSourcePath}/mooShape.js"></script>
Import the excanvas.js to support IE-7 & IE-8
<!--[if IE]>
<script type="text/javascript" src="{yourSourcePath}/excanvas.js"></script>
<![endif]-->
Insert an empty div
in the html
<div id="mooShapeContainer"></div>
Run the plugin
window.addEvent('domready',function(){
//example 1
//simple triangle
new mooShape('mooShapeContainer', {
type: 'triangle'
});
//example 2
//draw a shaded star and its title
new mooShape('mooShapeContainer', {
type: 'star',
actions: ['fill', 'shadow'],
shape: {
width: 50,
color: '#036',
shadowOffset: 5,
shadowBlur: 10,
shadowColor: [150, 20, 200]
},
title: {
text: 'mooShape',
size: 20,
color: [150, 20, 200],
align: 'top-right'
}
});
//example 3
//stroke a simple rectangle
new mooShape('mooShapeContainer', {
verbose: false,
type: 'rectangle',
actions: ['stroke'],
shape: {
width: 350,
height: 50,
color: '#036',
borderWeight: 10,
borderColor: [150, 20, 200]
},
title: {
text: 'Rectangle',
size: 30,
color: [150, 20, 200],
rotate: '270',
align: 'right'
}
});
//example 4
//draw a stroked circle shape and its title
new mooShape('mooShapeContainer', {
verbose: false,
type: 'circle',
actions: ['fill', 'stroke'],
opacity: 1,
div: {
id: 'div_id',
x: 200,
y: 100
},
shape: {
id: 'shape_id',
width: 50,
color: [255, 100, 60],
borderWeight: 10,
borderColor: '#c6f829'
},
title: {
text: 'Circle',
size: 50,
color: '#cfcfcf',
rotate: '315',
align: 'top-right'
}
});
});