如何在Raphael.js / IE中使模式“固定”？

I'm creating a small tool to illustrate the benefits of polarizing lenses. Basically a user will drag the lenses (a Raphael.js path) over a dazzling scene (the CSS background of the container DIV) and "see through" the lenses. Here is the js code:

我正在创建一个小工具来说明偏光镜片的好处。基本上,用户将镜头(Raphael.js路径)拖过一个令人眼花缭乱的场景(容器DIV的CSS背景)并“透视”镜头。这是js代码:

var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");

path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );

var move = function(dx,dy){
    this.translate( dx-this.ox, dy-this.oy );
    this.ox = dx;
    this.oy = dy;
},
start = function(){
    this.ox = 0;
    this.oy = 0;
},
end = function(){   
};

path_f.drag(move,start,end);

The #playmask div has this CSS (just the "un-polarized" background image and the size):

#playmask div有这个CSS(只是“非偏振”背景图像和大小):

#playmask{
    height:540px;
    width:720px;
    background: url(img/unpolarized.jpg);
}

What I'm stuck with is:

我坚持的是:

Chrome/Firefox, as always, play nice: the lenses shape shows up, and the fill image looks "fixed" while dragging the lenses around (see the first pic);

Chrome / Firefox一如既往地发挥出色:镜头形状显示出来,填充图像看起来“固定”,同时拖动镜头(见第一张照片);

IE versions 7,8,9 work, but (surprise!) they don't behave the same way: the fill image is "glued" to the lens shape (see second attached pic).

IE版本7,8,9可以工作,但是(惊喜!)它们的行为方式不同:填充图像“胶合”到镜头形状(参见第二张附图)。

What I'm asking here is: can I make IE9/8/7 behave in a similar manner, that is, keeping the fill image fixed while dragging the lenses? If so, how?

我在这里要问的是:我能否以相似的方式使IE9 / 8/7表现出来,即在拖动镜头时保持填充图像的固定?如果是这样,怎么样?

Firefox screenshot: 如何在Raphael.js / IE中使模式“固定”？

IE9 screenshot: 如何在Raphael.js / IE中使模式“固定”？

Edit ~~Using Modernizr to detect browser features, I noticed that this strange behavior seems related to the "no-smil" feature of IE.~~ I found out a bizarre behavior of IE9... the background does not "stick", but if I drag the mask around, select some text and press the right mousebutton, it refreshes the "polarized" background to the correct position!!

编辑使用Modernizr检测浏览器功能,我注意到这种奇怪的行为似乎与IE的“无笑”功能有关。我发现IE9的奇怪行为......背景不会“粘住”,但如果我拖动面具,选择一些文字并按下鼠标右键,它会将“偏振”背景刷新到正确的位置!

Edit 2 (21 May 2012) No solution yet :( but to be more precise, it does not relate in any way to the "no-smil" feature; and, the correct way to reproduce the bug on IE9 is drag the glass around, select some text in the rest of the page, and roll over the accelerator icon that pops up (the blue one with an arrow in it). The glasses bg magically "refreshes" at the correct position.

编辑2(2012年5月21日)还没有解决方案:(但更确切地说,它与“no-smil”功能没有任何关系;并且,在IE9上重现错误的正确方法是拖动玻璃周围,在页面的其余部分选择一些文字,然后滚动弹出的加速器图标(蓝色的箭头中有一个箭头)。眼镜bg在正确的位置神奇地“刷新”。

Important Edit 3 (28 August 2012)

重要编辑3(2012年8月28日)

You can find it all packed in this jsfiddle ( http://jsfiddle.net/q4rXm/17/ )

您可以在这个jsfiddle中找到所有内容(http://jsfiddle.net/q4rXm/17/)

4 个解决方案

#1

It seems like a redraw bug in IE. One workaround is to reset the fill image by adding

这似乎是IE中的重绘错误。一种解决方法是通过添加重置填充图像

path_f.attr({fill:'url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)'});

after the translation. See fiddle here. This works okay in IE9 except for being slightly sluggish, but maybe you can find a cheaper way of forcing redraws. Not tested in older IEs. Also, it causes flickering in Opera and Chrome, so you'll need to detect IE so you only reset the fill if running in IE.

翻译后。在这里看小提琴。这在IE9中运行正常,除了稍微缓慢,但也许你可以找到一种更便宜的方式来强制重绘。未在较旧的IE中测试过。此外,它会导致Opera和Chrome闪烁,因此您需要检测IE,以便在IE中运行时仅重置填充。

Edit: A better alternative is to reset the size of the canvas:

编辑:更好的选择是重置画布的大小:

group_a.translate( dx-this.ox, dy-this.oy );
rsr.setSize(720,540);

This doesn't cause flickering in other browsers, so no need for IE-detection.

这不会导致其他浏览器闪烁,因此不需要IE检测。

#2

This is something related to the positioning of the elements.

这与元素的定位有关。

Try giving absolute for #playmask and for its parent give position:relative

尝试给#playmask提供绝对值,并为其父提供位置:relative

I remember something like this encountered sometime before when playing with Raphael. It happened only in IE, I thought it was a bug in Raphael, later found its due to positioning.

我记得在玩拉斐尔之前的某个时候遇到过这样的事情。它只发生在IE浏览器中,我认为这是拉斐尔的一个漏洞,后来发现它的定位。

#3

I've had a few similar problems with the VML elements created by Raphael in IE, especially when trying to float elements over the top of other elements, etc.

我在IE中使用Raphael创建的VML元素有一些类似的问题,特别是在尝试将元素浮动到其他元素的顶部等时。

The VML elements seem to end up in weird places in the DOM sometimes, and with strange CSS values, such as "position: static", where you'd expect "position: absolute" or "position: fixed". I'd double-check those CSS values, and make sure that those elements are where you think they are in the DOM.

有时,VML元素似乎最终会出现在DOM中的奇怪位置,并且会出现奇怪的CSS值,例如“position:static”,您可能希望“position:absolute”或“position:fixed”。我会仔细检查那些CSS值,并确保这些元素是您认为它们在DOM中的位置。

I've also had Raphael reset the position value of the container in IE to "position: static". In that case, I had to add a line to my stylesheet to force it back. In your case, you could try:

我也让Raphael将IE中容器的位置值重置为“position:static”。在这种情况下,我不得不在样式表中添加一行来强制它。在您的情况下,您可以尝试:

#playmask {
  position: absolute!important;
}

Weird things seem to happen to the flow around those VML elements...

围绕这些VML元素的流程似乎发生了奇怪的事情......

#4

For all those answers saying IE9 can only handle VML and not SVG. Not true. IE9 has native SVG support, to certain extent. OP have you tried doing this with a clipmask instead of dragging around a fill? My understanding is that changing the position of the clipmask path should correctly "reveal" the correct section of the picture. Hopefully shouldn't be too hard after this to add a static image for the background.

对于所有那些答案,IE9只能处理VML而不能处理SVG。不对。 IE9在一定程度上支持原生SVG。你有没有尝试过使用剪贴画而不是拖动填充?我的理解是,改变剪辑路径路径的位置应该正确地“显示”图片的正确部分。希望在此之后不要太难以为背景添加静态图像。

#1