Bir div'i Raphael.js ile nasıl değiştiririm?

Question

Raphael için yeni bir markayım ve gerçekten sıkışıp kaldım, bir düğmeyi ve Raphael'i kullanarak bir div ve içeriğini döndürmek istiyorum.

İdeal olarak, düğmeye tıklandığında 0 dereceden -90 dereceye kadar geçen düzgün bir animasyona sahip olmak isterim, sonra düğmeye tekrar tıklandığında animasyon tersine çevrilirdi. Her iki animasyon için de aynı düğmeyi kullanabilmem için fare tıklamasıyla kimliği veya sınıfı değiştireceğim. Bu akıllıca olur mu?

Gerçekten biraz yardım, benim Sandbox http://jsbin.com/isijo/ olan lütfen istiyor ve herhangi bir yardım için şimdiden http://jsbin.com/isijo/edit

çok teşekkür de düzenleyebilirsiniz.

Answer 1

Merhaba ve hoşgeldin Raphael'e!

Birkaç aydan fazla bir süredir Raphael'e bakıyordum ve belgeler çok kapsamlı olmasa da, yazılım harika.

Div'leri Raphael nesnelerle birçok şekilde karıştırıyorum ve ne işe yaradığı ve nelerin işe yaramayacağı konusunda bir “hissetme” aldım.

Dönen boşlukları denememenizi, ancak (bunun yerine) Raphael nesnelerini öneririm.

aşağıda bu "tweakable" kodunu kullanarak Raphael düğme shiney setini yapabilir Her

Öncelikle ..

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); 

    }); 
} 

Sonra dönen Kümeleri hakkında daha fazla bilgi gerekiyor:

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); 

Bu son satırdaki "set" in dönüş derecesini ve dönüş merkezini gösterir. (Başka şeylerin yanında) belgelerine ek hedefliyor

My ek Raphael kaynakları sitesi:

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

İşte size değişiklik olmaksızın yukarıdaki 2 kod örneklerini çalıştırabilirsiniz:

http://raphaeljs.com/playground.html

Bu yardımcı oldu umuyordum ...

Answer 2

Bir div'i Raphael nesnesine dönüştürmenin bir yolu yoktur. Raphael rotate komutu sadece Raphael objeleri için tanımlandığından, en iyi bahsinizi HTML'nin yerine Raphael'de divunuzun (resim, yazı, düğme ve hepsi) ana öğelerini oluşturmak, bunları tek bir set halinde bir araya getirmek ve set bir Raphael nesnesidir, seti döndürür.

Answer 3

Rotate a div in CSS and in IE filters'a başvurun. Bu, SVG ile aynı değildir, bu yüzden daha fazla düzen sihrine ihtiyacınız varsa, Raphael şekillerinin gitme olasılığı vardır. Pencerenizde her ikisini de manipüle etmek için Raphael ile uyumlu olarak JQuery'u kullanabilmelisiniz, ancak ben Raphael için yeni bir marka oldum ve hiç böyle yapmadım.