% 100 genişlikteki RaphaelJS'de grafikler hazırlıyor musunuz?

Question

Flash & içeriğinde, tarayıcının veya içinde bulunulan esnek öğenin boyutu ne olursa olsun güzel bir şekilde uyarlanan grafikler gördüm. RaphaelJS ile gerçekten çok iyi bir eğitim almıyorum ama bunu yapabilir misiniz? nasıl?

Answer 1

Raphaeljs'de, boyutunu güncellemek için Raphael nesnesinde .setSize öğesini çağırabilirsiniz. Tarayıcı penceresi boyutunda çalışma zamanı değişikliklerine uyum sağlamak için bir pencere yeniden boyutlandırma etkinliğine yanıt verebilirsiniz. JQuery kullanarak, yapabileceği:

 
// initialize Raphael object 
var w = $(window).width(), 
    h = $(window).height(); 

var paper = Raphael($("#my_element").get(0), w,h); 

$(window).resize(function(){ 
    w = $(window).width(); 
    h = $(window).height(); 
    paper.setSize(w,h); 
    redraw_element(); // code to handle re-drawing, if necessary 
}); 

Answer 2

Normalde% 100 genişliğini ayarlamak ve SVG'nin içindeki bir ViewBox tanımlayabilir. Ancak, Raphael JS, SVG öğelerinize doğrudan bir genişlik ve yükseklik ayarladı, bu da bu tekniği yok etti.

Bosh'un cevabı harika ama benim için en boy oranını bozuyordu. Doğru şekilde çalışmasını sağlamak için birkaç şeyi düzeltmek zorunda kaldı. Ayrıca, maksimum boyutu korumak için bazı mantık dahil.

// Variables 
var width; 
var height; 
var maxWidth = 940; 
var maxHeight = 600; 
var widthPer; 

function setSize() { 
    // Setup width 
    width = window.innerWidth; 
    if (width > maxWidth) width = maxWidth; 

    // Setup height 
    widthPer = width/maxWidth; 
    height = widthPer * maxHeight; 
} 
var paper = Raphael(document.getElementById("infographic"), 940, 600); 
paper.setViewBox(0, 0, 940, 600, true); 

window.onresize = function(event) { 
    setSize(); 
    paper.setSize(width,height); 
    redraw_element(); 
} 

Answer 3

Bu paper.setSize` ölçeklendirmeden benim SVG'yi kırpar `kullanmak size duyarlı SVG

var w = 500, h=500; 
var paper = Raphael(w,h); 
paper.setViewBox(0,0,w,h,true); 
paper.setSize('100%', '100%');