Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added support for adjusting for stroke-width of rect shapes. stroke c…

…enterline used for positioning now.
  • Loading branch information...
commit 04248065031d0e3e20db8089b81729e8bf115228 1 parent 5565943
@dnewcome authored
Showing with 60 additions and 6 deletions.
  1. +8 −0 donatello.js
  2. +14 −6 rect.js
  3. +38 −0 tests/rect.html
View
8 donatello.js
@@ -20,6 +20,7 @@ function Donatello( id, x, y, w, h ) {
// properties that require a redraw
this.properties = {};
+
/**
* Translation between drawing terminology and CSS property
* names.
@@ -51,6 +52,13 @@ function Donatello( id, x, y, w, h ) {
}
}
+/**
+* some configuration flags. generally these
+* should go away as things mature and we figure out
+* the Right Thing
+*/
+Donatello.CORRECT_FOR_STROKE = true;
+
/**
* Detect css transform attribute for browser compatibility.
* Must be called after DOM is loaded since we detect
View
20 rect.js
@@ -40,12 +40,20 @@ Donatello.Pgram.prototype.draw = function() {
console.log( 'setting skew ' + skew );
el.style[ Donatello.getTransform() ] += 'skew(' + skew + 'deg)';
}
-
- el.style.top = this.properties.y + 'px';
- el.style.left = this.properties.x + 'px';
-
- el.style.width = this.properties.w + 'px';
- el.style.height = this.properties.h + 'px';
+
+ if( Donatello.CORRECT_FOR_STROKE ) {
+ var strokeWidth = this.properties['stroke-width'];
+ el.style.top = this.properties.y - strokeWidth/2 + 'px';
+ el.style.left = this.properties.x - strokeWidth/2 + 'px';
+ el.style.width = this.properties.w - strokeWidth + 'px';
+ el.style.height = this.properties.h - strokeWidth + 'px';
+ }
+ else {
+ el.style.top = this.properties.y + 'px';
+ el.style.left = this.properties.x + 'px';
+ el.style.width = this.properties.w + 'px';
+ el.style.height = this.properties.h + 'px';
+ }
}
Donatello.prototype.pgram = function( x, y, dx, dy, skew, a ) {
View
38 tests/rect.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+ <script src="../donatello.js" type="text/javascript"></script>
+ <script src="../rect.js" type="text/javascript"></script>
+ <script>
+
+ function main() {
+ var paper = Donatello.paper('paper-div', 20, 20, 300, 300 );
+ test_stroke_width_correction( paper );
+ }
+
+ /*
+ * Should draw a thick red square with a thin black square
+ * co-incident.
+ */
+ function test_stroke_width_correction( paper ) {
+ var attrs = {
+ stroke:'red',
+ 'stroke-width':20
+ };
+
+ paper.rect( 12, 12, 150, 150, attrs );
+ paper.rect( 12, 12, 150, 150 );
+ }
+ </script>
+ <style>
+ #paper-div {
+ border: 1px solid black
+ }
+ </style>
+
+</head>
+<body onload='main();'>
+ <div id="paper-div">
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.