Vải Raphael điền một ngăn chứa div

Question

Thay vì chỉ định chiều rộng và chiều cao của canvas Raphael, tôi cần kích thước đó là 100% kích thước của vùng chứa. Vì vậy, tôi chỉ có thể làm một Raphael ("container", containerElement.width, containerElement.height) và thiết lập chức năng onresize để thiết lập lại các giá trị đó. Nhưng sau đó các nội dung được rất jumpy và bận rộn như tôi thay đổi kích thước cửa sổ hoặc container bởi vì các thanh cuộn (mà tôi muốn nếu nó được quá nhỏ) flash trong và ngoài sự tồn tại.

Đây có phải là cách thích hợp để ràng buộc canvas của Raphael với kích thước đầy đủ của vùng chứa không? Tôi cũng muốn cung cấp tùy chọn để làm cho "toàn màn hình" của Raphael canvas chiếm toàn bộ cửa sổ trình duyệt.

Answer 1

Nếu bạn đang sử dụng div thì bạn có thể sử dụng CSS để đặt thành 100% chiều rộng và chiều cao. Sau đó, bạn sử dụng Raphael("container", "100%", "100%")

Để làm cho chế độ toàn màn hình, hầu hết các trình duyệt đều có lệnh để thực hiện việc này. Vì vậy, nếu bạn thực sự đang thực hiện 100% thì khi bạn nhấn nút lệnh, ví dụ: (F11 trong firefox) nó sẽ trở thành màn hình FULL.

Answer 2

Raphael("container", "100%", "100%"); sẽ lấp đầy canvas thành chiều rộng/chiều cao của vùng chứa DIV. Điều này hoạt động tốt trong Chrome và Safari. Để có được Firefox trên tàu bạn sẽ cần phải cung cấp cho cơ thể và html 100% chiều rộng/chiều cao trong css, nếu không vector sẽ bị cắt bớt.

Answer 3

Hơi muộn một chút nhưng tôi sẽ đăng ở đây để những người khác đang tìm kiế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)}); 

Giải pháp này là trình duyệt chéo và di động để bạn có thể sử dụng để kết hợp thiết kế đáp ứng. Bằng cách thêm các thông báo cho chiều rộng hoặc chiều cao của khung nhìn vào javascript của bạn dưới dạng các câu lệnh if, bạn có thể xác định tất cả các hình dạng của mình dựa trên các biến tương tự.