Permalink
Browse files

updated circle to account for stroke width when determining positioni…

…ng using method similar to what was used in rect.
  • Loading branch information...
1 parent 0424806 commit 33e36c97c1050ab31f377497e20b6b5dac091c59 Dan Newcome committed Jun 26, 2012
Showing with 17 additions and 5 deletions.
  1. +13 −4 circle.js
  2. +4 −1 tests/circle.html
View
@@ -33,10 +33,11 @@ Donatello.prototype.circle = function( x, y, r, a ) {
Donatello.Circle.prototype.draw = function() {
// TODO: some of this doesn't belong here
// we don't have to recalculate when color changes
+ var s = this.properties['stroke-width'];
+
var x = this.properties.x;
var y = this.properties.y;
var r = this.properties.r;
- var s = this.properties['stroke-width'];
var c = this.properties.stroke;
var f = this.properties.fill;
var style = this.properties['stroke-style'];
@@ -48,7 +49,15 @@ Donatello.Circle.prototype.draw = function() {
el.style.borderStyle = style;
el.style.bordercolor = c;
el.style.backgroundColor = f;
-
- el.style.left = x-r-s + 'px';
- el.style.top = y-r-s + 'px';
+
+ if( Donatello.CORRECT_FOR_STROKE ) {
+ el.style.left = x-r-s/2 + 'px';
+ el.style.top = y-r-s/2 + 'px';
+ el.style.width = 2*r - s + 'px';
+ el.style.height = 2*r - s + 'px';
+ }
+ else {
+ el.style.left = x-r-s + 'px';
+ el.style.top = y-r-s + 'px';
+ }
}
View
@@ -2,6 +2,7 @@
<html>
<head>
<script src="../donatello.js" type="text/javascript"></script>
+ <script src="../rect.js" type="text/javascript"></script>
<script src="../circle.js" type="text/javascript"></script>
<!--
<script src="../build/donatello-min.js" type="text/javascript"></script>
@@ -29,7 +30,9 @@
// test setting attribute
circle = paper.circle( 225, 25, 20 );
- circle.attr( { 'stroke-width':6 } );
+ circle.attr( { 'stroke-width':16, stroke:'red' } );
+ circle = paper.circle( 225, 25, 20 );
+
}
</script>
<style>

0 comments on commit 33e36c9

Please sign in to comment.