3

我有一个裁剪插件，当你拖动它时可以平移图像。我想在顶部应用一个蒙版 png 以给人一种切割形状的印象。 这是jsfiddle

它使用图像掩码 div 上的 css3 属性pointer-events:none;，并且可以在 chrome 和 firefox 等 webkit 浏览器中使用。但它在 IE 中不起作用，因为pointer-events: none;它只适用于 SVG。

我对如何通过 div 传递指针事件进行了大量研究。我尝试了一些解决方案，但它们令人头疼，有些不起作用：

所以问题

通过层转发鼠标事件

在深入研究了我正在使用的插件之后，我能够扩展它并让它在 IE 浏览器（仅测试 8 和 9）和其他浏览器中工作，而不是使用该pointer-events选项。 这是新版本的jsfiddle。 但我真的不知道它为什么有效？我基本上做了三件事。

  1. 将掩码 src 作为选项传入

  2. 添加检查以查看是否提供了掩码选项，如果提供，则加载函数：

    if (this.options.mask_src) {
  var masksrc = this.options.mask_src;
  this.createMask(masksrc);
}

  3. 让函数将带有掩码图像的 div 作为背景图像附加到文档 div：

    createMask: function(m_src) {

    $('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container);
},

谁能向我解释为什么此解决方案适用于具有遮罩层的图像平移？就像它只是将鼠标事件应用于图像，而忽略遮罩层。

4

1 回答 1

1

这似乎是由于这两个div元素的位置。在您的非功能版本中，这是 html 结构（简化）：

<div class="wrapper">
    <div id="viewer2" class="viewer">
      <img />
    </div>
    <div class="image-mask"></div>
</div>

在您插入元素的功能版本中，这就是它的最终结果：

<div class="wrapper">   
    <div class="viewer iviewer_cursor" id="viewer2" >
      <img />
      <div class="iviewer_image_mask"></div>
    </div>
</div>

通过将掩码移动到viewer原始的 div 中，我可以让它在这个 fiddle中工作。

我相信这会有所不同，因为您的脚本绑定到viewer2div，因此在内部放置掩码显然可以使其在脚本的上下文中运行，而将其放在外部则不能。

于 2012-08-02T16:38:32.723 回答