Skip to content

Instantly share code, notes, and snippets.

@ZER0
Created October 6, 2015 16:10
Show Gist options
  • Save ZER0/9607c493f912007b14a5 to your computer and use it in GitHub Desktop.
Save ZER0/9607c493f912007b14a5 to your computer and use it in GitHub Desktop.
Example of highligther based on CanvasHighlighter
function RulersHighlighter2(highlighterEnv) {
CanvasHighlighter.call(this, highlighterEnv);
}
RulersHighlighter2.prototype = extend(CanvasHighlighter.prototype, {
typeName: "RulersHighlighter",
textStep: 100,
graduationStep: 5,
stepScale: 1,
// event emitted when viewport change (zoom, size, etc)
onViewportChange() {
// recalc the steps
},
// event emitted every time we need to redraw the canvas
// (a.k.a. RequestAnimationFrame)
onUpdate(ctx) {
let { width, height, pixelRatio } = this.viewport;
let dpr = getDisplayPixelRatio(this.env.window);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.fillRect(0, 0, width * pixelRatio, 16 * dpr);
ctx.fillRect(0, 0, 16 * dpr, height * pixelRatio);
this.drawAxis("x", ctx);
this.drawAxis("y", ctx);
},
drawAxis(axis, ctx) {
// draw axis on canvas
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment