Changeset 7810

Timestamp:

03/27/07 14:02:16 (20 months ago)

Author:

elazutkin

Message:

gfx: added a stroke style

Location:

trunk

Files:

• src/gfx/common.js (modified) (3 diffs)
• src/gfx/shape.js (modified) (1 diff)
• src/gfx/svg.js (modified) (3 diffs)
• src/gfx/vml.js (modified) (8 diffs)
• tests/gfx/test_linestyle.html (added)

trunk/src/gfx/common.js

@@ -5 +5 @@
 dojo.require("dojo.lang.extras");
 dojo.require("dojo.dom");
+dojo.require("dojo.html.metrics");
 
 dojo.lang.mixin(dojo.gfx, {
@@ -23 +24 @@
 
         // default geometric attributes
-        defaultStroke: {type: "stroke", color: "black", width: 1, cap: "butt", join: 4},
+        defaultStroke: {type: "stroke", color: "black", style: "solid", width: 1, cap: "butt", join: 4},
         defaultLinearGradient: {type: "linear", x1: 0, y1: 0, x2: 100, y2: 100, 
                 colors: [{offset: 0, color: "black"}, {offset: 1, color: "white"}]},
@@ -116 +117 @@
                 return font;    // Object
         },
+        // length operations
+        cm_in_pt: 72 / 2.54,    // Number: centimeters per inch
+        mm_in_pt: 7.2 / 2.54,   // Number: millimeters per inch
+        px_in_pt: function(){
+                // summary: returns a number of pixels per point
+                return dojo.html.getCachedFontMeasurements()["12pt"] / 12;      // Number
+        },
+        pt2px: function(len){
+                // summary: converts points to pixels
+                // len: Number: a value in points
+                return len * dojo.gfx.px_in_pt();       // Number
+        },
+        px2pt: function(len){
+                // summary: converts pixels to points
+                // len: Number: a value in pixels
+                return len / dojo.gfx.px_in_pt();       // Number
+        },
+        normalizedLength: function(len) {
+                // summary: converts any length value to pixels
+                // len: String: a length, e.g., "12pc"
+                if(len.length == 0) return 0;
+                if(len.length > 2){
+                        var px_in_pt = dojo.gfx.px_in_pt();
+                        var val = parseFloat(len);
+                        switch(len.slice(-2)){
+                                case "px": return val;
+                                case "pt": return val * px_in_pt;
+                                case "in": return val * 72 * px_in_pt;
+                                case "pc": return val * 12 * px_in_pt;
+                                case "mm": return val / dojo.gfx.mm_in_pt * px_in_pt;
+                                case "cm": return val / dojo.gfx.cm_in_pt * px_in_pt;
+                        }
+                }
+                return parseFloat(len); // Number
+        },
         
         // a constant used to split a SVG/VML path into primitive components

trunk/src/gfx/shape.js

@@ -437 +437 @@
                         dojo.gfx.makeParameters(dojo.gfx.defaultFont, newFont);
                 this._setFont();
-        }
-});
+                return this;    // self
+        }
+});

trunk/src/gfx/svg.js

@@ -25 +25 @@
         }
         return null;    // Node
+};
+
+dojo.gfx.svg.dasharray = {
+        solid:                          "none",
+        shortdash:                      [4, 1],
+        shortdot:                       [1, 1],
+        shortdashdot:           [4, 1, 1, 1],
+        shortdashdotdot:        [4, 1, 1, 1, 1, 1],
+        dot:                            [1, 3],
+        dash:                           [4, 3],
+        longdash:                       [8, 3],
+        dashdot:                        [4, 3, 1, 3],
+        longdashdot:            [8, 3, 1, 3],
+        longdashdotdot:         [8, 3, 1, 3, 1, 3]
 };
 
@@ -112 +126 @@
                                 rn.setAttribute("stroke-linejoin",   s.join);
                         }
+                        var da = s.style.toLowerCase();
+                        if(da in dojo.gfx.svg.dasharray){ da = dojo.gfx.svg.dasharray[da]; }
+                        if(da instanceof Array){
+                                for(var i = 0; i < da.length; ++i){
+                                        da[i] *= s.width;
+                                }
+                                if(s.cap != "butt"){
+                                        for(var i = 0; i < da.length; i += 2){
+                                                da[i] -= s.width;
+                                                if(da[i] < 1){ da[i] = 1; }
+                                        }
+                                        for(var i = 1; i < da.length; i += 2){
+                                                da[i] += s.width;
+                                        }
+                                }
+                                da = da.join(",");
+                        }
+                        rn.setAttribute("stroke-dasharray", da);
+                        rn.setAttribute("dojoGfxStrokeStyle", s.style);
                 }
                 return this;    // self
@@ -309 +342 @@
                                 strokeStyle.join = rawNode.getAttribute("stroke-miterlimit");
                         }
+                        strokeStyle.style = rawNode.getAttribute("dojoGfxStrokeStyle");
                 }
                 return strokeStyle;     // Object

trunk/src/gfx/vml.js

@@ -6 +6 @@
 dojo.require("dojo.lang.extras");
 dojo.require("dojo.string.*");
-dojo.require("dojo.html.metrics");
 
 dojo.require("dojo.gfx.color");
@@ -144 +143 @@
                                         if(f.width && f.height){
                                                 // in points
-                                                fo.size.x = dojo.gfx.vml.px2pt(f.width);
-                                                fo.size.y = dojo.gfx.vml.px2pt(f.height);
+                                                fo.size.x = dojo.gfx.px2pt(f.width);
+                                                fo.size.y = dojo.gfx.px2pt(f.height);
                                         }
                                         fo.alignShape = false;
@@ -198 +197 @@
                                 // rn.stroke.miterlimit = s.width;
                         }
+                        rn.stroke.dashstyle = s.style == "none" ? "Solid" : s.style;
                 }
                 return this;    // self
@@ -289 +289 @@
                         }else if(fo.on && fo.type == "tile"){
                                 var fillStyle = dojo.lang.shallowCopy(dojo.gfx.defaultPattern, true);
-                                fillStyle.width  = dojo.gfx.vml.pt2px(fo.size.x); // from pt
-                                fillStyle.height = dojo.gfx.vml.pt2px(fo.size.y); // from pt
+                                fillStyle.width  = dojo.gfx.pt2px(fo.size.x); // from pt
+                                fillStyle.height = dojo.gfx.pt2px(fo.size.y); // from pt
                                 fillStyle.x = fo.origin.x * fillStyle.width;
                                 fillStyle.y = fo.origin.y * fillStyle.height;
@@ -310 +310 @@
                         strokeStyle.color = new dojo.gfx.color.Color(rawNode.strokecolor.value);
                         dojo.debug("We are expecting an .75pt here, instead of strokeweight = " + rawNode.strokeweight );
-                        strokeStyle.width = dojo.gfx.vml.normalizedLength(rawNode.strokeweight+"");
+                        strokeStyle.width = dojo.gfx.normalizedLength(rawNode.strokeweight+"");
                         strokeStyle.color.a = rawNode.stroke.opacity;
                         strokeStyle.cap = this._translate(this._capMapReversed, rawNode.stroke.endcap);
                         strokeStyle.join = rawNode.stroke.joinstyle == "miter" ? rawNode.stroke.miterlimit : rawNode.stroke.joinstyle;
+                        strokeStyle.style = rawNode.stroke.dashstyle;
                 }else{
                         return null;
@@ -330 +331 @@
                         matrix.yx = s.matrix.xtoy;
                         matrix.yy = s.matrix.ytoy;
-                        matrix.dx = dojo.gfx.vml.pt2px(s.offset.x);
-                        matrix.dy = dojo.gfx.vml.pt2px(s.offset.y);
+                        matrix.dx = dojo.gfx.pt2px(s.offset.x);
+                        matrix.dy = dojo.gfx.pt2px(s.offset.y);
                 }
                 return dojo.gfx.matrix.normalize(matrix);       // dojo.gfx.matrix.Matrix
@@ -850 +851 @@
                 // see comments in _getRealMatrix()
                 if(matrix){
-                        matrix = dojo.gfx.matrix.multiply(matrix, {dy: dojo.gfx.vml.normalizedLength(this.fontStyle.size) * 0.35});
+                        matrix = dojo.gfx.matrix.multiply(matrix, {dy: dojo.gfx.normalizedLength(this.fontStyle.size) * 0.35});
                 }
                 return matrix;  // dojo.gfx.Matrix2D
@@ -864 +865 @@
                 if(matrix){
                         matrix = dojo.gfx.matrix.multiply(matrix, 
-                                {dy: -dojo.gfx.vml.normalizedLength(this.fontStyle ? this.fontStyle.size : "10pt") * 0.35});
+                                {dy: -dojo.gfx.normalizedLength(this.fontStyle ? this.fontStyle.size : "10pt") * 0.35});
                 }
                 return matrix;  // dojo.gfx.Matrix2D