如何在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);

该#playmaskdiv有这个CSS(只是"非偏振"背景图像和尺寸):

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

我坚持的是:

• Chrome/Firefox一如既往地发挥出色:镜头形状显示出来,填充图像看起来"固定",同时拖动镜头(见第一张照片);
• IE版本7,8,9可以工作,但是(惊喜!)它们的行为方式不同:填充图像"胶合"到镜头形状(参见第二张附图).

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

Firefox截图:

IE9截图:

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

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

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

你可以在这个jsfiddle中找到它们(http://jsfiddle.net/q4rXm/17/)

Answer 1

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

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

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

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

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

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