Làm cách nào để xoay một div với Raphael.js?

Question

Tôi là thương hiệu mới với Raphael và thực sự bị mắc kẹt, tôi muốn xoay một div và nội dung của nó, bằng cách sử dụng một nút, với Raphael.

Lý tưởng nhất, tôi muốn có một hình động trơn tru từ 0 độ đến -90 độ khi nút được nhấp, sau đó khi nút được nhấp một lần nữa, hoạt ảnh sẽ đảo ngược. Tôi nghĩ rằng tôi sẽ thay đổi id hoặc lớp trên nhấp chuột để tôi có thể sử dụng cùng một nút cho cả hai hình động. Điều đó có khôn ngoan không?

Tôi thực sự muốn giúp đỡ xin vui lòng, Sandbox của tôi là tại http://jsbin.com/isijo/ và bạn có thể chỉnh sửa nó ở http://jsbin.com/isijo/edit

Nhiều cảm ơn trước sự giúp đỡ nào.

Answer 1

Xin chào và chào mừng đến với Raphael!

Tôi đã xem xét Raphael trong hơn một vài tháng và mặc dù tài liệu không phải là rất toàn diện nhưng phần mềm này rất tuyệt vời.

Tôi đã trộn Divs với các đối tượng Raphael theo nhiều cách và đã có một "cảm giác" cho những gì hoạt động và những gì không hoạt động.

Tôi khuyên bạn không nên thử xoay div mà thay vào đó là đối tượng Raphael.

Trước hết bạn có thể làm một bộ shiney các nút Raphael sử dụng này "tweakable" mã dưới đây ..

var bcontrols = new Array(); 
var yheight = 300; 

for (var i = 0; i < 3; i++) { 
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({ 
     fill: "r(.5,.9)#39c-#036", 
     stroke: "none" 
    }); 

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({ 
     fill: "r(.5,.1)#ccc-#ccc", 
     stroke: "none", 
     opacity: 0 
    }); 

    bcontrols[i].index = i; 
    bcontrols[i].shine.index = i; 

    bcontrols[i].shine.mouseover(function (e) { 
     this.insertBefore(bcontrols[this.index]); 
    }); 

    bcontrols[i].mouseout(function() { 
     this.insertBefore(bcontrols[this.index].shine); 
    }); 

    /* Called from Raphael buttons */ 
    bcontrols[i].click(function() { 
     alert("Hello you just clicked " + this.index); 

    }); 
} 

Tiếp theo, bạn cần phải biết thêm về Bộ xoay:

var s = paper.set(); 

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'})); 

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'})); 

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'})); 

s.animate({rotation: "360 65 25"}, 2000); 

này cho thấy mức độ xoay và tâm quay của "bộ" trên dòng cuối cùng.

Trang web của tôi có thêm nguồn lực Raphael nhằm bổ sung tài liệu (Trong số những thứ khác):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Heres nơi bạn có thể chạy 2 ví dụ mã trên mà không thay đổi:

http://raphaeljs.com/playground.html

Tôi hy vọng điều này đã giúp ...

Answer 2

Theo kiến ​​thức của tôi , không có cách nào để chuyển đổi div thành đối tượng Raphael. Vì lệnh xoay Raphael chỉ được xác định cho các đối tượng Raphael, tốt nhất bạn nên tạo các thành phần chính của div (hình ảnh, văn bản, nút và tất cả) trong Raphael thay vì HTML, đặt chúng lại với nhau thành một bộ duy nhất, và bộ này là đối tượng Raphael, xoay bộ.

Answer 3

Tham khảo ý kiến ​​Rotate a div in CSS and in IE filters. Điều này không giống như SVG, vì vậy nếu bạn cần thêm bố cục phép thuật, hình dạng Raphael có khả năng là cách để đi. Bạn sẽ có thể sử dụng JQuery trong buổi hòa nhạc với Raphael để thao túng cả hai trong cửa sổ của bạn, nhưng tôi là thương hiệu mới với Raphael và chưa bao giờ làm như vậy.