Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

(updated) Always draw crosshair on half-pixels to prevent aliasing #925

Merged
merged 1 commit into from

2 participants

@danxshap

Round the coordinates to the nearest whole number and then conditionally add 0.5 pixels if the line width is odd. This makes it so the crosshair is never drawn in between screen pixels and so it will always look crisp/clear.

Note: this replaces #924, and it only applies the coordinate adjustment when drawing (like in #17).

@dnschnur dnschnur was assigned
@dnschnur
Owner

Looks good; thank you!

@dnschnur dnschnur merged commit 4a35faf into flot:master
@dnschnur dnschnur referenced this pull request
Closed

Blurry lines bugs #17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 11, 2013
  1. @danxshap
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 4 deletions.
  1. +8 −4 jquery.flot.crosshair.js
View
12 jquery.flot.crosshair.js
@@ -139,18 +139,22 @@ The plugin also adds four public methods:
ctx.translate(plotOffset.left, plotOffset.top);
if (crosshair.x != -1) {
+ var adj = plot.getOptions().crosshair.lineWidth % 2 === 0 ? 0 : 0.5;
+
ctx.strokeStyle = c.color;
ctx.lineWidth = c.lineWidth;
ctx.lineJoin = "round";
ctx.beginPath();
if (c.mode.indexOf("x") != -1) {
- ctx.moveTo(crosshair.x, 0);
- ctx.lineTo(crosshair.x, plot.height());
+ var drawX = Math.round(crosshair.x) + adj;
+ ctx.moveTo(drawX, 0);
+ ctx.lineTo(drawX, plot.height());
}
if (c.mode.indexOf("y") != -1) {
- ctx.moveTo(0, crosshair.y);
- ctx.lineTo(plot.width(), crosshair.y);
+ var drawY = Math.round(crosshair.y) + adj;
+ ctx.moveTo(0, drawY);
+ ctx.lineTo(plot.width(), drawY);
}
ctx.stroke();
}
Something went wrong with that request. Please try again.