jquery - Javascript adjust div position after zoom -
i'm working on script there image on canvas. user can zoom on image mouse wheel (using d3js zoom), zoom centered mouse position.
my problem have div on canvas supposed highlight parts of image. div position should updated when zooming still highlight same spot. i'am struggling find way it. here's jsfiddle basic example, want div cover same spot of image when zooming.
code used zoom image:
function zoom() { var e = d3.event; var tx = math.min(0, math.max(e.translate[0], 408 - 408 * e.scale)); var ty = math.min(0, math.max(e.translate[1], 464 - 464 * e.scale)); context.save(); context.clearrect(0, 0, 408, 464); zoome.translate([tx, ty]); context.translate(tx, ty); context.scale(d3.event.scale, d3.event.scale); context.drawimage(imageobj, 0, 0, 408, 464); context.restore(); }
thanks.
Comments
Post a Comment