Permalink
Browse files

adding text shape object

  • Loading branch information...
1 parent 4fb31cd commit 94471085c2fdb735c707887201bcbc8a21b83102 @dnewcome committed Mar 9, 2012
Showing with 56 additions and 9 deletions.
  1. +13 −6 samples/text.html
  2. +43 −3 text.js
View
19 samples/text.html
@@ -2,18 +2,25 @@
<html>
<head>
<script src="../donatello.js" type="text/javascript"></script>
+ <script src="../text.js" type="text/javascript"></script>
<script>
function main() {
var colors = [
- '#71717', '#A71717', '#8AA717', '#34A717', '#17A751', '#17A7A7', '#1751A7', '#3417A7'
+ '#717171', '#A71717', '#8AA717', '#34A717', '#17A751', '#17A7A7', '#1751A7', '#3417A7'
];
var paper = Donatello.paper('paper-div', 20, 20, 500, 500 );
+ paper.attr( {fill:'black'} );
var r = 100;
- for( var i=0; i < 16; i ++ ) {
- var x = Math.cos( i*Math.PI/8 )*r;
- var y = Math.sin( i*Math.PI/8 )*r;
- var text = paper.text( 250+x, 250+y, 'donatello' );
- text.rotate( (i*Math.PI/8)*180/Math.PI );
+ for( var i=0; i < 8; i ++ ) {
+ var x = Math.cos( i*Math.PI/4 )*r;
+ var y = Math.sin( i*Math.PI/4 )*r;
+ var text = paper.text( 250 + x, 250 + y, "foo", {
+ 'stroke-width': 4*i,
+ 'stroke': colors[i%8],
+ 'color': colors[i%8],
+ 'stroke-style': 'solid'
+ });
+ text.rotate( (i*Math.PI/4)*180/Math.PI );
}
}
</script>
View
46 text.js
@@ -1,6 +1,3 @@
-/**
-* Draw text to the scene using a <div> tag.
-*/
Donatello.prototype.text = function( x, y, str, a ) {
var el = Donatello.createElement( x, y, null, null, 'div');
el.innerHTML = str;
@@ -9,3 +6,46 @@ Donatello.prototype.text = function( x, y, str, a ) {
don.attr( a );
return don;
}
+
+/**
+* Draw text to the scene using a <div> tag.
+*/
+Donatello.Text = function( parent, x, y, str, a ) {
+
+ a = Donatello.attrDefaults( a );
+
+ // properties collection is essential for tracking
+ // attributes outside of CSS values.
+ this.properties = {
+ x: x, y: y, str: str
+ };
+
+ var el = Donatello.createElement( x, y, null, null, 'div' );
+
+ this.dom = el;
+ this.draw();
+ parent.dom.appendChild( el );
+ this.attr( a );
+
+};
+
+Donatello.Text.prototype = new Donatello( null );
+
+/**
+* Every shape has a draw function. Any attribute
+* change that requires a recalculation should be
+* handled here.
+*/
+Donatello.Text.prototype.draw = function() {
+ this.dom.innerHTML = this.properties['str'];
+};
+
+/**
+* Draw a shape.
+*
+* This is the convenience function used to automatically
+* attach the new shape to its parent.
+*/
+Donatello.prototype.text = function( x, y, str, a ) {
+ return new Donatello.Text( this, x, y, str, a );
+}

0 comments on commit 9447108

Please sign in to comment.