Cách tạo mẫu "cố định" trong Raphael.js/IE?

Question

Tôi đang tạo một công cụ nhỏ để minh họa các lợi ích của ống kính phân cực. Về cơ bản một người dùng sẽ kéo các ống kính (một đường dẫn Raphael.js) trên một cảnh chói (nền CSS của vùng chứa DIV) và "nhìn xuyên thấu" thấu kính. Đây là mã 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); 

Các #playmask div có CSS ​​này (chỉ là hình nền "un-phân cực" và kích thước):

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

Những gì tôi đang mắc kẹt với là:

• Chrome/Firefox, như mọi khi, chơi đẹp: hình ống kính hiển thị và hình ảnh trông "cố định" trong khi kéo các ống kính xung quanh (xem ảnh đầu tiên);
• IE phiên bản 7,8,9 công việc, nhưng (ngạc nhiên!) Chúng không hoạt động theo cùng một cách: hình ảnh được "dán" vào hình dạng thấu kính (xem ảnh đính kèm thứ hai).

Điều tôi hỏi ở đây là: tôi có thể làm cho IE9/8/7 hoạt động theo cách tương tự, có nghĩa là giữ hình ảnh được cố định trong khi kéo ống kính? Nếu vậy, làm thế nào?

Firefox ảnh chụp màn hình:

IE9 ảnh chụp màn hình:

Sửa Sử dụng Modernizr để phát hiện tính năng trình duyệt, tôi nhận thấy rằng hành vi kỳ lạ này dường như liên quan đến "no-SMIL" tính năng của IE. Tôi phát hiện ra một hành vi kỳ lạ của IE9 ... nền không "dính", nhưng nếu tôi kéo mặt nạ xung quanh, chọn một số văn bản và nhấn nút chuột phải, nó sẽ làm mới nền "phân cực" Chức vụ!!

Chỉnh sửa 2 (21 tháng năm 2012) Không có giải pháp chưa :(nhưng để được chính xác hơn, nó không liên quan trong bất kỳ cách nào để các "no-SMIL" tính năng, và, cách chính xác để tái tạo lỗi trên IE9 là kéo kính xung quanh, chọn một số văn bản trong phần còn lại của trang, và cuộn qua biểu tượng máy gia tốc bật lên (màu xanh với một mũi tên trong đó). Kính bg kỳ diệu "làm mới" ở vị trí chính xác .

quan trọng chỉnh sửa 3 (ngày 28 tháng 8 2012)

Bạn có thể tìm thấy tất cả đóng gói trong 0.123.(http://jsfiddle.net/q4rXm/17/)

Answer 1

Dường như lỗi vẽ lại trong IE. Một giải pháp khác là đặt lại hình ảnh lấp đầy bằng cách thêm

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

sau khi dịch. See fiddle here. Điều này hoạt động tốt trong IE9 ngoại trừ hơi chậm chạp, nhưng có lẽ bạn có thể tìm thấy cách rẻ hơn để buộc vẽ lại. Không được thử nghiệm trong các trình duyệt IE cũ hơn. Ngoài ra, nó gây ra nhấp nháy trong Opera và Chrome, vì vậy bạn sẽ cần phải phát hiện IE, do đó bạn chỉ cần thiết lập lại điền nếu chạy trong IE.

---

Edit: Một lựa chọn tốt hơn là để reset the size of the canvas:

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

này không gây nhấp nháy trong các trình duyệt khác, vì vậy không cần phải cho IE phát hiện.

Answer 2

Tôi đã có một vài vấn đề tương tự với các yếu tố VML tạo ra bởi Raphael trong IE, đặc biệt là khi cố gắng để nổi các yếu tố trên đầu của các yếu tố khác, vv

Các yếu tố dường như VML kết thúc ở những nơi kỳ lạ trong DOM đôi khi, và với các giá trị CSS lạ, chẳng hạn như "vị trí: tĩnh", nơi bạn mong muốn "vị trí: tuyệt đối" hoặc "vị trí: cố định". Tôi muốn kiểm tra lại các giá trị CSS đó và đảm bảo rằng các yếu tố đó là nơi bạn cho rằng chúng nằm trong DOM.

Tôi cũng đã đặt Raphael giá trị vị trí của vùng chứa trong IE thành "vị trí: tĩnh".Trong trường hợp đó, tôi phải thêm một dòng vào biểu định kiểu của mình để buộc nó trở lại. Trong trường hợp của bạn, bạn có thể thử:

#playmask { 
    position: absolute!important; 
} 

điều Weird dường như xảy ra với dòng chảy xung quanh những yếu tố VML ...

Answer 3

Đây là một cái gì đó liên quan đến vị trí của các yếu tố.

Hãy thử đưa ra tuyệt đối cho #playmask và cho mẹ của nó cung cấp cho position: relative

Tôi nhớ một cái gì đó như thế này gặp phải lúc nào trước khi chơi với Raphael. Nó chỉ xảy ra trong IE, tôi nghĩ rằng đó là một lỗi trong Raphael, sau đó tìm thấy nó do vị trí.

Answer 4

Đối với tất cả các câu trả lời đó, IE9 chỉ có thể xử lý VML chứ không phải SVG. Không đúng. IE9 có hỗ trợ SVG bản địa, ở một mức độ nào đó. OP bạn đã thử làm điều này với một clipmask thay vì kéo xung quanh một điền? Sự hiểu biết của tôi là việc thay đổi vị trí của đường dẫn clipmask sẽ chính xác "tiết lộ" phần chính xác của hình ảnh. Hy vọng rằng không nên quá khó khăn sau này để thêm một hình ảnh tĩnh cho nền.