Question

这里有一个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
        });

Answer 1

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

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

具有矢量叠加的HTML图像，允许使用图像进行缩放和平移

1 个答案: