Soru Raphael tuval doldurma bir konteyner div


Raphael kanvasının genişliğini ve boyunu belirtmek yerine, kabının boyutunun% 100 olması gerekir. Bu yüzden bir Raphael ("container", containerElement.width, containerElement.height) yapabilirim ve bu değerleri sıfırlamak için onresize fonksiyonunu ayarlayabilirim. Ama sonra içeriğin çok küçük ve telaşlı hale gelmesiyle pencereyi veya konteyneri yeniden boyutlandırıyorum çünkü kaydırma çubukları (eğer çok küçük olursa olsun) varoluşun içine girip çıkıyor.

Raphael'in tuvalini bir konteynerin tam boyutuna bağlamak için uygun bir yol bu mu? Ayrıca, tüm tarayıcı penceresini ele alan Raphael tuvalini "tam ekran" yapma seçeneğini de sunmak isterim.


21
2017-11-15 10:26


Menşei




Cevaplar:


Bir div kullanıyorsanız, bunu genişlik ve yüksekliğin% 100'üne ayarlamak için CSS kullanabilirsiniz. Daha sonra Raphael("container", "100%", "100%") 

Tam ekran yapmak için, çoğu tarayıcı bunu yapmak için bir komut var. Yani eğer gerçekten% 100 yapıyorsanız, o zaman komut düğmesine bastığınızda. (F11 in firefox'ta) TAM ekrana dönüşecek.


27
2017-11-15 10:35



Google Grupları tartışma forumundaki dokümanlar ve diğer yayınları okuyacağım izlenimi aldım, bir yüzde değil, Rafael yapıcısında bir sayı (piksel sayısı için) girmek zorunda kaldınız. Bunu deneyeceğim, teşekkürler. Tam ekran ile ilgili olarak, sadece tarayıcı penceresinin tam ekranını kastediyorum, yani% 100,% 100 buna izin verecektir. - at.
Raphael belgeleri belirli boyutları kullanarak gösterir ancak yüzdelik kullanımları, kendi deneyimlerinden işe yarar. Raphael belgelerini bildiğini farz edeyim, ama yapmazsan bir link var: raphaeljs.com/reference.html - Adam Holmes
Teşekkürler Adam, cevabı bu gibi görünüyor! Belgeleri okudum, ama özellikle orada bir dizi piksel koymamız gerektiğini söyledi. - at.
Bu cevap için teşekkürler. Ayrıca çevrimiçi referansı da kontrol ettim ve bir sayı girmemiz gerektiğini söyledi. - Curious2learn
Kullanmanız gerekmediğini ("kapsayıcı") - kullanmanıza gerek olmadığını ("#container"), $ ("# container"), veya (document.getElementById ("container")) (ikincisi ile sorun yaşadım). seçenekleri). - terrace


Raphael("container", "100%", "100%"); tuvali DIV kabının genişliği / yüksekliğine kadar doldurur. Bu, Chrome ve Safari'de iyi çalışır. Firefox'u gemide almak için css'ye gövde ve html% 100 genişlik / yükseklik vermeniz gerekecek, aksi takdirde vektör kırpılacak.


2
2018-02-14 05:57



Bu kabul edilenin aynısı değil mi? - at.
hayır, kabul edilen cevap firefox hakkında% 100 html ve vücut hakkında bir şey söylemiyor - supercrabtree


Bu konuda biraz geç ama arama yapan diğer insanlar için burada yayınlayacağım.

    var h = $('container').height(); //get the container height into variable h       
    var w = $('container').width(); //get the container width into variable w
    //set your Raphael canvas to the variables
    var contpaper = Raphael("container", w, h); 
    var doit;
    //function to reload the page and/or do other adjustments
    function resizedw(){   
        document.location.reload()                
    }
    //call function 200 ms after resize is complete.
    $(window).resize(function(){clearTimeout(doit); 
        doit = setTimeout(function() {
        resizedw();
    }, 200)});

Bu çözüm, çapraz tarayıcı ve mobil güvenlidir, böylece bunu duyarlı tasarımla birleştirmek için kullanabilirsiniz. If deyimleri biçiminde javascript'in görünüm genişliği veya yüksekliği için uyarılar ekleyerek, tüm şekillerinizi aynı değişkenlere göre tanımlayabilirsiniz.


0
2017-07-25 02:17