OLD | NEW |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | 1 // Copyright 2017 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 (function() { | 5 (function() { |
6 | 6 |
7 /** | 7 /** |
8 * The time in millseconds of the animation updates. | 8 * The time in millseconds of the animation updates. |
9 * @const {number} | 9 * @const {number} |
10 */ | 10 */ |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 * @param {number} endAngle The end angle of the arc we want to draw. | 70 * @param {number} endAngle The end angle of the arc we want to draw. |
71 * @param {string} color The color of the arc we want to draw. The string is | 71 * @param {string} color The color of the arc we want to draw. The string is |
72 * in the format rgba(r',g',b',a'). r', g', b' are values from [0-255] | 72 * in the format rgba(r',g',b',a'). r', g', b' are values from [0-255] |
73 * and a' is a value from [0-1]. | 73 * and a' is a value from [0-1]. |
74 */ | 74 */ |
75 drawArc: function(startAngle, endAngle, color) { | 75 drawArc: function(startAngle, endAngle, color) { |
76 var c = this.$.canvas; | 76 var c = this.$.canvas; |
77 var ctx = c.getContext('2d'); | 77 var ctx = c.getContext('2d'); |
78 | 78 |
79 ctx.beginPath(); | 79 ctx.beginPath(); |
80 ctx.arc(c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle, | 80 ctx.arc( |
| 81 c.width / 2, c.height / 2, this.canvasCircleRadius_, startAngle, |
81 endAngle); | 82 endAngle); |
82 ctx.lineWidth = this.canvasCircleStrokeWidth_; | 83 ctx.lineWidth = this.canvasCircleStrokeWidth_; |
83 ctx.strokeStyle = color; | 84 ctx.strokeStyle = color; |
84 ctx.stroke(); | 85 ctx.stroke(); |
85 }, | 86 }, |
86 | 87 |
87 /** | 88 /** |
88 * Draws a circle on the canvas element around the center with radius | 89 * Draws a circle on the canvas element around the center with radius |
89 * |CANVAS_CIRCLE_RADIUS| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|. | 90 * |CANVAS_CIRCLE_RADIUS| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|. |
90 */ | 91 */ |
(...skipping 11 matching lines...) Expand all Loading... |
102 drawShadow: function(blur, offsetX, offsetY) { | 103 drawShadow: function(blur, offsetX, offsetY) { |
103 var c = this.$.canvas; | 104 var c = this.$.canvas; |
104 var ctx = c.getContext('2d'); | 105 var ctx = c.getContext('2d'); |
105 | 106 |
106 ctx.beginPath(); | 107 ctx.beginPath(); |
107 ctx.translate(-c.width, 0); | 108 ctx.translate(-c.width, 0); |
108 ctx.shadowOffsetX = c.width + offsetX; | 109 ctx.shadowOffsetX = c.width + offsetX; |
109 ctx.shadowOffsetY = 0; | 110 ctx.shadowOffsetY = 0; |
110 ctx.shadowColor = this.canvasCircleShadowColor_; | 111 ctx.shadowColor = this.canvasCircleShadowColor_; |
111 ctx.shadowBlur = blur; | 112 ctx.shadowBlur = blur; |
112 ctx.arc(c.width / 2, c.height / 2, | 113 ctx.arc( |
| 114 c.width / 2, c.height / 2, |
113 this.canvasCircleRadius_ - this.canvasCircleStrokeWidth_ / 2 + blur / 2, | 115 this.canvasCircleRadius_ - this.canvasCircleStrokeWidth_ / 2 + blur / 2, |
114 0, 2*Math.PI); | 116 0, 2 * Math.PI); |
115 ctx.stroke(); | 117 ctx.stroke(); |
116 ctx.translate(c.width, 0); | 118 ctx.translate(c.width, 0); |
117 }, | 119 }, |
118 | 120 |
119 /** | 121 /** |
120 * Animates the progress the circle. Animates an arc that starts at the top of | 122 * Animates the progress the circle. Animates an arc that starts at the top of |
121 * the circle to startAngle, to an arc that starts at the top of the circle to | 123 * the circle to startAngle, to an arc that starts at the top of the circle to |
122 * endAngle. | 124 * endAngle. |
123 * @param {number} startAngle The start angle of the arc we want to draw. | 125 * @param {number} startAngle The start angle of the arc we want to draw. |
124 * @param {number} endAngle The end angle of the arc we want to draw. | 126 * @param {number} endAngle The end angle of the arc we want to draw. |
125 */ | 127 */ |
126 animate: function(startAngle, endAngle) { | 128 animate: function(startAngle, endAngle) { |
127 var currentAngle = startAngle; | 129 var currentAngle = startAngle; |
128 // The value to update the angle by each tick. | 130 // The value to update the angle by each tick. |
129 var step = (endAngle - startAngle) / | 131 var step = |
130 (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS); | 132 (endAngle - startAngle) / (ANIMATE_DURATION_MS / ANIMATE_TICKS_MS); |
131 var id = setInterval(doAnimate.bind(this), ANIMATE_TICKS_MS); | 133 var id = setInterval(doAnimate.bind(this), ANIMATE_TICKS_MS); |
132 // Circles on html canvas have 0 radians on the positive x-axis and go in | 134 // Circles on html canvas have 0 radians on the positive x-axis and go in |
133 // clockwise direction. We want to start at the top of the circle which is | 135 // clockwise direction. We want to start at the top of the circle which is |
134 // 3pi/2. | 136 // 3pi/2. |
135 var start = 3 * Math.PI / 2; | 137 var start = 3 * Math.PI / 2; |
136 | 138 |
137 // Function that is called every tick of the interval, draws the arc a bit | 139 // Function that is called every tick of the interval, draws the arc a bit |
138 // closer to the final destination each tick, until it reaches the final | 140 // closer to the final destination each tick, until it reaches the final |
139 // destination. | 141 // destination. |
140 function doAnimate() { | 142 function doAnimate() { |
141 if (currentAngle >= endAngle) | 143 if (currentAngle >= endAngle) |
142 clearInterval(id); | 144 clearInterval(id); |
143 | 145 |
144 // Clears the canvas and draws the new progress circle. | 146 // Clears the canvas and draws the new progress circle. |
145 this.clearCanvas(); | 147 this.clearCanvas(); |
146 // Drawing two arcs to form a circle gives a nicer look than drawing an | 148 // Drawing two arcs to form a circle gives a nicer look than drawing an |
147 // arc on top of a circle. If |currentAngle| is 0, draw from |start| + | 149 // arc on top of a circle. If |currentAngle| is 0, draw from |start| + |
148 // |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / 2) otherwise | 150 // |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / 2) otherwise |
149 // the regular draw from |start| to |currentAngle| will draw nothing which | 151 // the regular draw from |start| to |currentAngle| will draw nothing which |
150 // will cause a flicker for one frame. | 152 // will cause a flicker for one frame. |
151 this.drawArc(start, start + currentAngle, | 153 this.drawArc( |
152 this.canvasCircleProgressColor_); | 154 start, start + currentAngle, this.canvasCircleProgressColor_); |
153 this.drawArc(start + currentAngle, | 155 this.drawArc( |
154 currentAngle <= 0 ? 7 * Math.PI / 2 : start, | 156 start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start, |
155 this.canvasCircleBackgroundColor_); | 157 this.canvasCircleBackgroundColor_); |
156 currentAngle += step; | 158 currentAngle += step; |
157 } | 159 } |
158 }, | 160 }, |
159 | 161 |
160 /** | 162 /** |
161 * Clear the canvas of any renderings. | 163 * Clear the canvas of any renderings. |
162 */ | 164 */ |
163 clearCanvas: function() { | 165 clearCanvas: function() { |
164 var c = this.$.canvas; | 166 var c = this.$.canvas; |
165 var ctx = c.getContext('2d'); | 167 var ctx = c.getContext('2d'); |
166 ctx.clearRect(0, 0, c.width, c.height); | 168 ctx.clearRect(0, 0, c.width, c.height); |
167 }, | 169 }, |
168 }); | 170 }); |
169 })(); | 171 })(); |
OLD | NEW |