带有矢量叠加层的 HTML 图像，允许对图像进行缩放和平移答案

【问题标题】：HTML Image with vector overlay that allows zooming and panning with the image带有矢量叠加层的 HTML 图像，允许对图像进行缩放和平移
【发布时间】：2014-06-01 23:26:09
【问题描述】：

这是一个 jsfiddle，它举例说明了我遇到的一些问题：http://jsfiddle.net/8LRKW/

在这个例子中，如果我的矩形的 z-index 是负数并且图像在最上面，我可以双击图像，它会缩放和平移，但是如果我单击按钮使矩形成为上-大多数情况下，我无法再缩放/平移图像 - 如何在画布位于顶部时缩放/平移？

此外，如何使画布缩放/平移与正在缩放/平移的图像同步？

另外，作为旁注，我还注意到一个问题是我的矩形最初是隐藏的，只有当画布鼠标悬停时才会出现。这是怎么回事，我该如何解决？

<div style="position:absolute;left:0px;top:0px;" id="village">
    <p>
        <img src="http://www.consulenza-web.com/jquery/touchpanview/simpson.jpeg" alt="simpson" width="1920" height="1200" />
    </p>
</div>
<canvas style="position:absolute;left:0px;top:0px;z-index:999;" id="myCanvas" resize></canvas>
<input style="position:absolute;left:0px;top:350px;z-index:9999;" type="button" value="Toggle Shape z-Index" onclick="$('#myCanvas').css('z-index',$('#myCanvas').css('z-index') * -1);" />


var canvas = document.getElementById('myCanvas');
                paper.setup(canvas);
                var rectangle = new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100));
                var path = new paper.Path.Rectangle(rectangle);
                path.fillColor = '#e9e9ff';

$('#village img').touchPanView({
            width: 600,
            height: 300,
            startZoomedOut: true
        });

【问题讨论】：

你有什么问题？
我希望我能得到关于如何满足我的要求的建议（例如，当我有一个画布坐在它上面窃取所有鼠标事件时，我如何缩放/平移图像)。
这不是问题。这太宽泛了。
这不是一个具体的问题，更多的是“为我寻找工具”。尝试几种方法并在此处询问您是否遇到问题。请参阅此处的 #5 stackoverflow.com/help/on-topic 了解更多信息
添加了 jsfiddle 以获得更多细节。

标签： javascript jquery html css svg

【解决方案1】：

在样式中添加指针事件：无。这会在 Firefox 中修复它，并将在其他实现指针事件的 UI 中修复它。

<canvas style="position:absolute;left:0px;top:0px;z-index:999;pointer-events:none" id="myCanvas" resize></canvas>

【讨论】：

太棒了！这解决了我的一个问题。知道为什么直到我将鼠标悬停在画布上才显示矢量图形吗？