OLD | NEW |
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 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 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @param {number} width | 7 * @param {number} width |
8 * @param {number} height | 8 * @param {number} height |
9 * @param {number} marginTop | 9 * @param {number} marginTop |
10 * @param {number} controlPointRadius | 10 * @param {number} controlPointRadius |
11 * @param {boolean} linearLine | 11 * @param {boolean} linearLine |
12 */ | 12 */ |
13 WebInspector.BezierUI = function(width, height, marginTop, controlPointRadius, l
inearLine) | 13 WebInspector.BezierUI = function(width, height, marginTop, controlPointRadius, l
inearLine) |
14 { | 14 { |
15 this.width = width; | 15 this.width = width; |
16 this.height = height; | 16 this.height = height; |
17 this.marginTop = marginTop; | 17 this.marginTop = marginTop; |
18 this.radius = controlPointRadius; | 18 this.radius = controlPointRadius; |
19 this.linearLine = linearLine; | 19 this.linearLine = linearLine; |
20 } | 20 }; |
21 | 21 |
22 WebInspector.BezierUI.prototype = { | 22 WebInspector.BezierUI.prototype = { |
23 /** | 23 /** |
24 * @return {number} | 24 * @return {number} |
25 */ | 25 */ |
26 curveWidth: function() | 26 curveWidth: function() |
27 { | 27 { |
28 return this.width - this.radius * 2; | 28 return this.width - this.radius * 2; |
29 }, | 29 }, |
30 | 30 |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
91 var curvePoints = [ | 91 var curvePoints = [ |
92 new WebInspector.Geometry.Point(bezier.controlPoints[0].x * width +
this.radius, (1 - bezier.controlPoints[0].y) * height + this.radius + this.margi
nTop), | 92 new WebInspector.Geometry.Point(bezier.controlPoints[0].x * width +
this.radius, (1 - bezier.controlPoints[0].y) * height + this.radius + this.margi
nTop), |
93 new WebInspector.Geometry.Point(bezier.controlPoints[1].x * width +
this.radius, (1 - bezier.controlPoints[1].y) * height + this.radius + this.margi
nTop), | 93 new WebInspector.Geometry.Point(bezier.controlPoints[1].x * width +
this.radius, (1 - bezier.controlPoints[1].y) * height + this.radius + this.margi
nTop), |
94 new WebInspector.Geometry.Point(width + this.radius, this.marginTop
+ this.radius) | 94 new WebInspector.Geometry.Point(width + this.radius, this.marginTop
+ this.radius) |
95 ]; | 95 ]; |
96 curve.setAttribute("d", "M" + this.radius + "," + (height + this.radius
+ this.marginTop) + " C" + curvePoints.join(" ")); | 96 curve.setAttribute("d", "M" + this.radius + "," + (height + this.radius
+ this.marginTop) + " C" + curvePoints.join(" ")); |
97 | 97 |
98 this._drawControlPoints(group, 0, height, bezier.controlPoints[0].x * wi
dth, (1 - bezier.controlPoints[0].y) * height); | 98 this._drawControlPoints(group, 0, height, bezier.controlPoints[0].x * wi
dth, (1 - bezier.controlPoints[0].y) * height); |
99 this._drawControlPoints(group, width, 0, bezier.controlPoints[1].x * wid
th, (1 - bezier.controlPoints[1].y) * height); | 99 this._drawControlPoints(group, width, 0, bezier.controlPoints[1].x * wid
th, (1 - bezier.controlPoints[1].y) * height); |
100 } | 100 } |
101 } | 101 }; |
102 | 102 |
103 WebInspector.BezierUI.Height = 26; | 103 WebInspector.BezierUI.Height = 26; |
104 | 104 |
105 /** | 105 /** |
106 * @param {!WebInspector.Geometry.CubicBezier} bezier | 106 * @param {!WebInspector.Geometry.CubicBezier} bezier |
107 * @param {!Element} path | 107 * @param {!Element} path |
108 * @param {number} width | 108 * @param {number} width |
109 */ | 109 */ |
110 WebInspector.BezierUI.drawVelocityChart = function(bezier, path, width) | 110 WebInspector.BezierUI.drawVelocityChart = function(bezier, path, width) |
111 { | 111 { |
112 var height = WebInspector.BezierUI.Height; | 112 var height = WebInspector.BezierUI.Height; |
113 var pathBuilder = ["M", 0, height]; | 113 var pathBuilder = ["M", 0, height]; |
114 /** @const */ var sampleSize = 1 / 40; | 114 /** @const */ var sampleSize = 1 / 40; |
115 | 115 |
116 var prev = bezier.evaluateAt(0); | 116 var prev = bezier.evaluateAt(0); |
117 for (var t = sampleSize; t < 1 + sampleSize; t += sampleSize) { | 117 for (var t = sampleSize; t < 1 + sampleSize; t += sampleSize) { |
118 var current = bezier.evaluateAt(t); | 118 var current = bezier.evaluateAt(t); |
119 var slope = (current.y - prev.y) / (current.x - prev.x); | 119 var slope = (current.y - prev.y) / (current.x - prev.x); |
120 var weightedX = prev.x * (1 - t) + current.x * t; | 120 var weightedX = prev.x * (1 - t) + current.x * t; |
121 slope = Math.tanh(slope / 1.5); // Normalise slope | 121 slope = Math.tanh(slope / 1.5); // Normalise slope |
122 pathBuilder = pathBuilder.concat(["L", (weightedX * width).toFixed(2), (
height - slope * height).toFixed(2) ]); | 122 pathBuilder = pathBuilder.concat(["L", (weightedX * width).toFixed(2), (
height - slope * height).toFixed(2) ]); |
123 prev = current; | 123 prev = current; |
124 } | 124 } |
125 pathBuilder = pathBuilder.concat(["L", width.toFixed(2), height, "Z"]); | 125 pathBuilder = pathBuilder.concat(["L", width.toFixed(2), height, "Z"]); |
126 path.setAttribute("d", pathBuilder.join(" ")); | 126 path.setAttribute("d", pathBuilder.join(" ")); |
127 } | 127 }; |
OLD | NEW |