javascript - 如何在 Raphael.js/IE 中创建一个模式 "fixed"？

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 以类似的方式运行，即在拖动镜头时保持填充图像固定？如果是，怎么办？

火狐截图:

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 检测。