Commit | Line | Data |
---|---|---|
fb63bf1b DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
6 | ||
7 | /** | |
8 | * @fileoverview Adds support for dashed lines to the HTML5 canvas. | |
9 | * | |
10 | * Usage: | |
11 | * var ctx = canvas.getContext("2d"); | |
12 | * ctx.installPattern([10, 5]) // draw 10 pixels, skip 5 pixels, repeat. | |
13 | * ctx.beginPath(); | |
14 | * ctx.moveTo(100, 100); // start the first line segment. | |
15 | * ctx.lineTo(150, 200); | |
16 | * ctx.lineTo(200, 100); | |
17 | * ctx.moveTo(300, 150); // start a second, unconnected line | |
18 | * ctx.lineTo(400, 250); | |
19 | * ... | |
20 | * ctx.stroke(); // draw the dashed line. | |
21 | * ctx.uninstallPattern(); | |
22 | * | |
23 | * This is designed to leave the canvas untouched when it's not used. | |
24 | * If you never install a pattern, or call uninstallPattern(), then the canvas | |
25 | * will be exactly as it would have if you'd never used this library. The only | |
26 | * difference from the standard canvas will be the "installPattern" method of | |
27 | * the drawing context. | |
28 | */ | |
29 | ||
7e1f9ca3 DV |
30 | /** |
31 | * Change the stroking style of the canvas drawing context from a solid line to | |
32 | * a pattern (e.g. dashes, dash-dot-dash, etc.) | |
33 | * | |
34 | * Once you've installed the pattern, you can draw with it by using the | |
35 | * beginPath(), moveTo(), lineTo() and stroke() method calls. Note that some | |
36 | * more advanced methods (e.g. quadraticCurveTo() and bezierCurveTo()) are not | |
37 | * supported. See file overview for a working example. | |
38 | * | |
39 | * Side effects of calling this method include adding an "isPatternInstalled" | |
40 | * property and "uninstallPattern" method to this particular canvas context. | |
41 | * You must call uninstallPattern() before calling installPattern() again. | |
42 | * | |
43 | * @param {pattern | Array<Number>} A description of the stroke pattern. Even | |
44 | * indices indicate a draw and odd indices indicate a gap (in pixels). The | |
45 | * array should have a even length as any odd lengthed array could be expressed | |
46 | * as a smaller even length array. | |
47 | */ | |
fb63bf1b DV |
48 | CanvasRenderingContext2D.prototype.installPattern = function(pattern) { |
49 | if (typeof(this.isPatternInstalled) !== 'undefined') { | |
50 | throw "Must un-install old line pattern before installing a new one."; | |
51 | } | |
52 | this.isPatternInstalled = true; | |
53 | ||
54 | var dashedLineToHistory = [0, 0]; | |
55 | ||
56 | // list of connected line segements: | |
57 | // [ [x1, y1], ..., [xn, yn] ], [ [x1, y1], ..., [xn, yn] ] | |
58 | var segments = []; | |
59 | ||
60 | // Stash away copies of the unmodified line-drawing functions. | |
61 | var realBeginPath = this.beginPath; | |
62 | var realLineTo = this.lineTo; | |
63 | var realMoveTo = this.moveTo; | |
64 | var realStroke = this.stroke; | |
65 | ||
66 | this.uninstallPattern = function() { | |
67 | this.beginPath = realBeginPath; | |
68 | this.lineTo = realLineTo; | |
69 | this.moveTo = realMoveTo; | |
70 | this.stroke = realStroke; | |
71 | this.uninstallPattern = undefined; | |
72 | this.isPatternInstalled = undefined; | |
73 | }; | |
74 | ||
75 | // Keep our own copies of the line segments as they're drawn. | |
76 | this.beginPath = function() { | |
77 | segments = []; | |
78 | realBeginPath.call(this); | |
79 | }; | |
80 | this.moveTo = function(x, y) { | |
81 | segments.push([[x, y]]); | |
82 | realMoveTo.call(this, x, y); | |
83 | }; | |
84 | this.lineTo = function(x, y) { | |
85 | var last = segments[segments.length - 1]; | |
86 | last.push([x, y]); | |
87 | }; | |
88 | ||
89 | this.stroke = function() { | |
90 | if (segments.length === 0) { | |
91 | // Maybe the user is drawing something other than a line. | |
92 | // TODO(danvk): test this case. | |
93 | realStroke.call(this); | |
94 | return; | |
95 | } | |
96 | ||
97 | for (var i = 0; i < segments.length; i++) { | |
98 | var seg = segments[i]; | |
99 | var x1 = seg[0][0], y1 = seg[0][1]; | |
100 | for (var j = 1; j < seg.length; j++) { | |
101 | // Draw a dashed line from (x1, y1) - (x2, y2) | |
102 | var x2 = seg[j][0], y2 = seg[j][1]; | |
103 | this.save(); | |
104 | ||
105 | // Calculate transformation parameters | |
106 | var dx = (x2-x1); | |
107 | var dy = (y2-y1); | |
108 | var len = Math.sqrt(dx*dx + dy*dy); | |
109 | var rot = Math.atan2(dy, dx); | |
110 | ||
111 | // Set transformation | |
112 | this.translate(x1, y1); | |
113 | realMoveTo.call(this, 0, 0); | |
114 | this.rotate(rot); | |
115 | ||
116 | // Set last pattern index we used for this pattern. | |
117 | var patternIndex = dashedLineToHistory[0]; | |
118 | x = 0; | |
119 | while (len > x) { | |
120 | // Get the length of the pattern segment we are dealing with. | |
121 | segment = pattern[patternIndex]; | |
122 | // If our last draw didn't complete the pattern segment all the way | |
123 | // we will try to finish it. Otherwise we will try to do the whole | |
124 | // segment. | |
125 | if (dashedLineToHistory[1]) { | |
126 | x += dashedLineToHistory[1]; | |
127 | } else { | |
128 | x += segment; | |
129 | } | |
130 | ||
131 | if (x > len) { | |
132 | // We were unable to complete this pattern index all the way, keep | |
133 | // where we are the history so our next draw continues where we | |
134 | // left off in the pattern. | |
135 | dashedLineToHistory = [patternIndex, x-len]; | |
136 | x = len; | |
137 | } else { | |
138 | // We completed this patternIndex, we put in the history that we | |
139 | // are on the beginning of the next segment. | |
140 | dashedLineToHistory = [(patternIndex+1)%pattern.length, 0]; | |
141 | } | |
142 | ||
143 | // We do a line on a even pattern index and just move on a odd | |
144 | // pattern index. The move is the empty space in the dash. | |
145 | if (patternIndex % 2 === 0) { | |
146 | realLineTo.call(this, x, 0); | |
147 | } else { | |
148 | realMoveTo.call(this, x, 0); | |
149 | } | |
150 | ||
151 | // If we are not done, next loop process the next pattern segment, or | |
152 | // the first segment again if we are at the end of the pattern. | |
153 | patternIndex = (patternIndex+1) % pattern.length; | |
154 | } | |
155 | ||
156 | this.restore(); | |
157 | x1 = x2, y1 = y2; | |
158 | } | |
159 | } | |
160 | realStroke.call(this); | |
161 | segments = []; | |
162 | }; | |
163 | }; | |
8458f353 DV |
164 | |
165 | /** | |
166 | * Removes the previously-installed pattern. | |
167 | * You must call installPattern() before calling this. You can install at most | |
168 | * one pattern at a time--there is no pattern stack. | |
169 | */ | |
170 | CanvasRenderingContext2D.prototype.uninstallPattern = function() { | |
171 | // This will be replaced by a non-error version when a pattern is installed. | |
172 | throw "Must install a line pattern before uninstalling it."; | |
173 | } |