如何使图案“固定”在Raphael.js / IE？ [英] How to make a pattern "fixed" in Raphael.js / IE?
问题描述
我正在创建一个小工具来说明偏光镜片的好处。基本上，用户将镜头（Raphael.js路径）拖过一个令人眼花缭乱的场景（容器DIV的CSS背景）并透视镜头。这是js代码：
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:
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（只是非偏振的背景图像和大小）：
The #playmask div has this CSS (just the "un-polarized" background image and the size):
#playmask{
height:540px;
width:720px;
background: url(img/unpolarized.jpg);
}
我坚持的是：
- Chrome / Firefox一如既往地玩得很好：镜头形状显示出来，填充图像看起来固定，同时拖动镜头（见第一张照片）;
- IE版本7,8,9有效，但（惊喜！）它们的行为方式不同：填充图像胶合到镜头形状（参见第二张附图） ）。
我在这里要问的是：我能否以相似的方式使IE9 / 8/7表现出来，也就是说，在拖动镜头时保持填充图像固定？如果是这样，怎么样？
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?
Firefox截图：
Firefox screenshot:
IE9截图：
IE9 screenshot:
编辑 使用Modernizr检测浏览器功能，我注意到这种奇怪的行为似乎与IE的no smil功能。
我发现 IE9 的奇怪行为......背景不坚持 ，但是如果我拖动面具，选择一些文字并按下鼠标右键，它会将偏振背景刷新到正确位置!!
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!!
编辑2（2012年5月21日）尚无解决方案:(但更确切地说，它与no-smil功能无关;而且，正确的方法是重现IE9上的错误是拖动玻璃，在页面的其余部分选择一些文本，并翻转加速弹出的erator图标（带有箭头的蓝色图标）。眼镜bg在正确位置神奇地刷新。
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.
重要编辑3（2012年8月28日）
你可以在这个jsfiddle （ http://jsfiddle.net/q4rXm/17/ ）
推荐答案
这似乎是IE中的重绘错误。一种解决方法是通过添加
It seems like a redraw bug in IE. One workaround is to reset the fill image by adding
path_f.attr({fill:'url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)'});
。 请点击此处。这在IE9中运行正常，除了稍微缓慢，但也许你可以找到一种更便宜的方式来强制重绘。未在较旧的IE中测试过。此外，它会导致Opera和Chrome闪烁，因此您需要检测IE，以便在IE中运行时仅重置填充。
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.
修改：
更好的选择是重置尺寸画布：
group_a.translate( dx-this.ox, dy-this.oy );
rsr.setSize(720,540);
这不会导致其他浏览器出现闪烁，因此无需进行IE检测。
This doesn't cause flickering in other browsers, so no need for IE-detection.
这篇关于如何使图案“固定”在Raphael.js / IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
