Javascript在缩放后调整div位置

Question

我正在编写一个画布上有图像的脚本。用户可以使用鼠标滚轮放大图像（使用d3js缩放），缩放以鼠标位置为中心。

我的问题是我在画布上还有一些div应该突出显示部分图像。缩放时应更新这些div位置，以便它们仍然突出显示相同的位置。但我很难找到一个好办法。这是一个Jsfiddle作为基本示例，所以我希望div即使在缩放时也能覆盖图像的相同位置。

用于缩放图像的代码：

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();
}

感谢。