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' } }); });
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus