Cách thêm và xóa ánh sáng cho phần tử Raphael?

Question

Tôi đang cố gắng thiết lập di chuột cho phần tử raphael để khi chuột ở trên phần tử, nó có ánh sáng và khi chuột rời đi, ánh sáng bị xóa. Tôi đã tìm ra cách thêm ánh sáng, nhưng tôi đang gặp khó khăn khi xóa nó. Đây là những gì kịch bản của tôi trông giống như:

$(document).ready(function() { 
    var paper = Raphael(0,0,360,360); 
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); 
    myCircle.hover(function() { 
     myCircle.glow().attr('stroke','#FFF'); 
    }, function() { 
     // removing the glow from the circle?? 
    }); 
}); 

Vì vậy, một phần hoạt động là thêm ánh sáng vào vòng tròn khi tôi di chuột qua nó. Tuy nhiên, tôi không biết cách loại bỏ ánh sáng khi con chuột bị dịch chuyển khỏi phần tử vòng tròn. Bạn có biết làm thế nào tôi có thể loại bỏ các ánh sáng từ một yếu tố?

Lưu ý: Nền của phần tử nội dung được đặt thành màu đen (# 000).

Libraries sử dụng:

• JQuery
• Raphaël.js

Answer 1

Giải pháp có lẽ đơn giản hơn bạn nghĩ.

http://jsfiddle.net/vszkW/2/ (ngã ba từ fiddle Matt)

Bạn chỉ cần dự trữ là "ánh sáng", đó là một yếu tố. Và như thường lệ trong Raphael, các yếu tố có một lệnh .remove():

myCircle.hover(
    // When the mouse comes over the object // 
    // Stock the created "glow" object in myCircle.g 
    function() { 
     this.g = this.glow({color: "#FFF", width: 100}); 
    }, 
    // When the mouse goes away // 
    // this.g was already created. Destroy it! 
    function() { 
     this.g.remove(); 
    }); 

Answer 2

Đây là hành vi kỳ quái. Ví dụ (Tôi fiddled với điều này cho khá một vài phút):

http://jsfiddle.net/FPE6y/

Theo như tôi có thể nói, điều này không nên xảy ra. Có thể là một lỗi. RaphaelJS về mặt lịch sử dường như có vấn đề với những việc không thực hiện: How do you make an element undragable in Raphael?

Xin lỗi tôi không thể trình bày giải pháp ngoại trừ việc vòng tròn đó bị xóa và thay thế ngay lập tức bằng một vòng mới không bao giờ có ánh sáng?

Trong khi đó, report the behavior at GitHub nếu chưa có ở đó. Bạn có thể tham khảo jsFiddle của tôi trong báo cáo nếu bạn muốn (hoặc nĩa nó và gửi của riêng bạn).

Answer 3

Được rồi, hơi bị hack.

Bạn sẽ không thể loại bỏ ánh sáng một cách dễ dàng bởi vì ánh sáng thực sự là một mảng các phần tử, vì bất kỳ lý do gì không có chức năng removeGlow nhưng chụp và làm móng chúng.

Đây là những gì tôi đã đưa ra, tôi thực sự có một dự án ngay bây giờ cần có chức năng này, đến đây để khắc phục và tìm ra thứ gì đó khi tôi thấy bài đăng của bạn.

Được rồi, bước 1:

Thêm một mảng trống phía trên công cụ init của bạn, điều này sẽ giữ ánh sáng của bạn.

var glowsToBeRemoved = [];

Bước 2: Đi vào Raphaël.js và tìm (trong vòng elproto.glow):

for (var i = 1; i < c + 1; i++) { 
     out.push(r.path(path).attr({ 
      stroke: s.color, 
      fill: s.fill ? s.color : "none", 
      "stroke-linejoin": "round", 
      "stroke-linecap": "round", 
      "stroke-width": +(s.width/c * i).toFixed(3), 
      opacity: +(s.opacity/c).toFixed(3) 
     })); 
    } 

Ngay sau này (và trước sự trở lại) thêm:

glowsToBeRemoved.push(out); 

Vì vậy, đây là những gì đang làm, đang đẩy tất cả các phát sáng khi chúng được tạo thành một mảng.

Bây giờ để xóa chúng, bạn sẽ tạo một vòng lặp với .remove(); trên di chuột của bạn.Dưới đây là hình thức của nó:

var i = 0; 
var size=glowsToBeRemoved.length; 
for(i=0; i < size; i++) 
{ 
    glowsToBeRemoved[i].remove(); 
} 

Bạn có thể đập nó vào một chức năng và đính kèm nó để di chuột ra hoặc bất cứ điều gì bạn muốn làm.

Nhìn đẹp?

Answer 4

Trong khi câu trả lời Lajarre chắc chắn là con đường để đi, hiện nay là một lỗi trong Raphael, gây phương pháp remove() để không chỉ loại bỏ yếu tố phát sáng, nhưng cũng là yếu tố mà ánh sáng được áp dụng.

Tại sao điều này vẫn hoạt động trong câu chuyện của Lajarre là ngoài tầm hiểu của tôi.

Xem ở đây để biết thêm chi tiết về vấn đề đó: https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 5

Đây là cách tôi thêm/gỡ bỏ các hiệu ứng ánh sáng sử dụng Raphael:

paper.circle(x, y, r) 
    .attr({fill: "lightblue", stroke: "lightblue", "stroke-width": 6}) 
    .hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      }) 
    .id = "example"; 

Tôi chỉ cần thêm ".hover" tới phần tử Raphael .

Bạn cũng có thể làm điều gì đó như:

var c = paper.circle(x, y, r); 
c.hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      });