Fixed issue Mikhus#90 - taking into account font size when drawing ti…

…ck labels on radial gauge
nikson-a · Dec 28, 2016 · 3516f40 · 3516f40
1 parent 5a29178
commit 3516f40
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 10 deletions.
diff --git a/examples/adoptive-tick-labels.html b/examples/adoptive-tick-labels.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <script src="../gauge.min.js"></script>
+    <style>body {
+        padding: 0;
+        margin: 0;
+        background: #fff
+    }</style>
+</head>
+<body>
+
+<button onclick="animateGauges()">Animate</button>
+<button onclick="stopGaugesAnimation()">Stop animation</button>
+
+<hr>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+></canvas>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+         data-font-numbers-size="10"
+></canvas>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+         data-font-numbers-size="20"
+></canvas>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+         data-font-numbers-size="30"
+></canvas>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+         data-font-numbers-size="40"
+></canvas>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="13"
+         data-max-value="87"
+         data-exact-ticks="true"
+         data-major-ticks="13,20,25,38,50,62,80,87"
+         data-minor-ticks="2"
+         data-highlights="0"
+         data-width="500"
+         data-height="500"
+         data-font-numbers-size="50"
+></canvas>
+
+<script>
+if (!Array.prototype.forEach) {
+    Array.prototype.forEach = function(cb) {
+        var i = 0, s = this.length;
+        for (; i < s; i++) {
+            cb && cb(this[i], i, this);
+        }
+    }
+}
+
+document.fonts && document.fonts.forEach(function(font) {
+    font.loaded.then(function() {
+        if (font.family.match(/Led/)) {
+            document.gauges.forEach(function(gauge) {
+                gauge.update();
+            });
+        }
+    });
+});
+
+var timers = [];
+
+function animateGauges() {
+    document.gauges.forEach(function(gauge) {
+        timers.push(setInterval(function() {
+            gauge.value = Math.random() *
+                (gauge.options.maxValue - gauge.options.minValue) +
+                gauge.options.minValue;
+        }, gauge.animation.duration + 50));
+    });
+}
+
+function stopGaugesAnimation() {
+    timers.forEach(function(timer) {
+        clearInterval(timer);
+    });
+}
+</script>
+</body>
+</html>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/RadialGauge.js b/lib/RadialGauge.js
@@ -375,7 +375,11 @@ function closeStrokedPath(context) {
  * @param {RadialGaugeOptions} options
  */
 function drawRadialNumbers(context, options) {
-    let radius = radialTicksRadius(context, options) - context.max * 0.25;
+    let textWidth = Math.max.apply(null, options.majorTicks.map(text =>
+        context.measureText(text).width));
+    let textHeight = options.fontNumbersSize;
+    let radius = radialTicksRadius(context, options) - context.max * 0.2 -
+        Math.sqrt(textWidth * textWidth + textHeight * textHeight) / 2;
     let points = {};
     let i = 0;
     let s = options.majorTicks.length;
@@ -392,10 +396,8 @@ function drawRadialNumbers(context, options) {
     }
 
     for (; i < s; ++i) {
-        let angle = plateValueAngle + radialNextAngle(
-            options,
-            options.exactTicks ? options.majorTicks[i] : i,
-            s);
+        let angle = plateValueAngle + radialNextAngle(options,
+            options.exactTicks ? options.majorTicks[i] : i, s);
         let point = drawings.radialPoint(radius, drawings.radians(angle));
 
         if (angle === 360) angle = 0;
@@ -410,7 +412,8 @@ function drawRadialNumbers(context, options) {
         context.fillStyle = colors[i];
         context.lineWidth = 0;
         context.textAlign = 'center';
-        context.fillText(options.majorTicks[i], point.x, point.y + 3);
+        context.textBaseline = 'middle';
+        context.fillText(options.majorTicks[i], point.x, point.y);
     }
 
     isAnimated && context.restore();

diff --git a/test-coverage.svg b/test-coverage.svg