Merge pull request #404 from tangrams/dash-fraction

Allow fractional width dashed line patterns
tangrams · Sep 1, 2016 · e2176b3 · e2176b3
2 parents cb69f6f + b057d26
commit e2176b3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/styles/lines/dasharray.js b/src/styles/lines/dasharray.js
@@ -17,6 +17,7 @@ export default function renderDashArray (pattern, options = {}) {
     const dash_pixel = options.dash_color || default_dash_color;
     const background_color = options.background_color || default_background_color;
     const dashes = pattern;
+    const scale = options.scale || 1;
 
     // If pattern is odd, repeat it to make it even (see SVG spec)
     if (dashes.length % 2 === 1) {
@@ -26,7 +27,7 @@ export default function renderDashArray (pattern, options = {}) {
     let dash = true;
     let pixels = [];
     for (let i=0; i < dashes.length; i++) {
-        let segment = dashes[i];
+        let segment = Math.floor(dashes[i] * scale);
         for (let s=0; s < segment; s++) {
             Array.prototype.push.apply(pixels, dash ? dash_pixel : background_color);
         }

diff --git a/src/styles/lines/lines.js b/src/styles/lines/lines.js
@@ -49,7 +49,8 @@ Object.assign(Lines, {
             this.defines.TANGRAM_TEXTURE_COORDS = true;
 
             // Scaling factor to add precision to line texture V coordinate packed as normalized short
-            this.defines.TANGRAM_V_SCALE_ADJUST = Geo.tile_scale;
+            this.dash_scale = 20; // provides precision for dash patterns that are a fraction of line width
+            this.defines.TANGRAM_V_SCALE_ADJUST = Geo.tile_scale * this.dash_scale;
 
             // Add vertex attribute for UVs only when needed
             attribs.push({ name: 'a_texcoord', size: 2, type: gl.UNSIGNED_SHORT, normalized: true });
@@ -82,7 +83,7 @@ Object.assign(Lines, {
             }
 
             // Render line pattern
-            let dash = renderDashArray(this.dash);
+            let dash = renderDashArray(this.dash, { scale: this.dash_scale });
             this.texture = '_' + this.name + '_dasharray';
             Texture.create(this.gl, this.texture, {
                 data: dash.pixels,