WIP: fix: chart jumping and wobbling on window.devicePixelRatio !== 1

joewalnes · Oct 7, 2021 · b6a6b0a · b6a6b0a
1 parent e22ba7e
commit b6a6b0a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/examples/example1.html b/examples/example1.html
@@ -11,8 +11,13 @@
       }, 500);
 
       function createTimeline() {
-        var chart = new SmoothieChart();
-        chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
+        var chart = new SmoothieChart({
+          millisPerPixel: 1000 / (74.6 / 3),
+          interpolation: 'step',
+          maxValue: 10000,
+          minValue: 0,
+        });
+        chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 2 * 1 / window.devicePixelRatio });
         chart.streamTo(document.getElementById("chart"), 500);
       }
     </script>

diff --git a/smoothie.js b/smoothie.js
@@ -141,12 +141,30 @@
     },
     // So lines (especially vertical and horizontal) look a) consistent along their length and b) sharp.
     pixelSnap: function(position, lineWidth) {
-      if (lineWidth % 2 === 0) {
+      // TODO grid lines and bezier lines still (occasionally) wobble. But it's still better than it was.
+
+      var dpr = window.devicePixelRatio,
+          coordinatesPerPixel = 1 / dpr;
+
+      // return position - position % window.devicePixelRatio;
+      // return position - position % coordinatesPerPixel;
+
+      // if (lineWidth % (2 * dpr) === 0) {
+
+      // TODO may need to replace the strict comparison with `<= coordinatesPerPixel / 2` (or something
+      // like this), that will minimize smudging instead of only removing it when it's strictly divisible.
+      // Not only because of truncation error that comes with `dpr !== 1` but because it also makes sense for
+      // `dpr === 1`.
+      if (lineWidth % (2 * coordinatesPerPixel) === 0) {
         // Closest pixel edge.
-        return Math.round(position);
+        // return Math.round(position);
+
+        // TODO It's not the closest, it's round down.
+        return position - position % coordinatesPerPixel;
       } else {
         // Closest pixel center.
-        return Math.floor(position) + 0.5;
+        // return Math.floor(position) + 0.5;
+        return position - position % coordinatesPerPixel + coordinatesPerPixel / 2;
       }
     },
   };
@@ -797,7 +815,9 @@
     time = time || nowMillis - (this.delay || 0);
 
     // Round time down to pixel granularity, so motion appears smoother.
-    time -= time % this.options.millisPerPixel;
+    // time -= time % this.options.millisPerPixel;
+    // time -= time % (this.options.millisPerPixel / window.devicePixelRatio);
+    time -= time % (this.options.millisPerPixel / window.devicePixelRatio);
 
     if (!this.isAnimatingScale) {
       // We're not animating. We can use the last render time and the scroll speed to work out whether