3

I had a cropping plugin that allowed for panning of an image when you dragged on it. I wanted to apply a mask png over the top to give the impression of a cut shape. here is the jsfiddle

It uses the css3 property pointer-events:none; on the image mask div, and it works in webkit browsers like chrome and firefox. But it doesn't work in IE because pointer-events: none; only works on an SVG.

I did a lot of research in how to pass pointer events through divs. I tried some solutions, but they were a headache, and some didn't work:

so question

forward mouse events through layers

After looking more into the plugin I was using I was able to extend it and get it to work in an IE browser (tested 8 and 9 only) and other browsers, not utilizing the pointer-events option. Here is the jsfiddle of the new version. But I don't really know why it is working?? I basically did three things.

  1. Pass the mask src in as an option

  2. Add a check to see if a mask option is provided, if so load the function:

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

  3. Have the function append a div with mask image as the background image to the document div:

    createMask: function(m_src) {

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

Can anyone explain to me why this solution works for image panning that has a mask layer overtop? It's like it is only applying mouse events to the image, and ignoring the mask layer.

4

1 に答える 1

1

divこれは、2 つの要素の位置によるものと思われます。機能していないバージョンでは、これは 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>

そして、マスクを元の div に移動することで、この fiddle でviewer機能させることができました。

スクリプトは div にバインドされているviewer2ため、スクリプトのコンテキスト内で機能するように見えるマスクを内側に持つことで、外側にマスクを持たせることはできないため、これは違いがあると思います。

于 2012-08-02T16:38:32.723 に答える