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

Question

我正在创建一个小工具来说明偏光镜片的好处。基本上，用户将镜头（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);

#playmask div有这个CSS（只是“非偏振”的背景图像和大小）：

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

我坚持的是：

• Chrome / Firefox一如既往地玩得很好：镜头形状显示出来，填充图像看起来“固定”，同时拖动镜头（见第一张图片）;
• IE版本7,8,9可以工作，但是（惊喜！）它们的行为方式不同：填充图像“胶合”到镜头形状（参见第二张附图）。

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

Firefox截图：

IE9截图：

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

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

重要编辑3（2012年8月28日）

您可以在this jsfiddle（http://jsfiddle.net/q4rXm/17/）

中找到所有内容

Answer 1

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

来重置填充图像

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

翻译后

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

---

修改 更好的选择是reset the size of the canvas：

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

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

Answer 2

这与元素的定位有关。

尝试为#playmask提供绝对值，并为其父提供位置：relative

我记得曾经和拉斐尔一起玩过这样的事情。它只发生在IE浏览器中，我认为这是拉斐尔的一个错误，后来发现它是由于定位。

Answer 3

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

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

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

#playmask {
  position: absolute!important;
}

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

Answer 4

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