Fabric.js: Canvas có chiều rộng 100% có thể?

Question

Khi sử dụng 'canvas = fabric.Canvas mới (' foo ')', Vải chuyển đổi các yếu tố canvas rằng có một lớp css với width = 100% gắn liền với nó vào một cái gì đó như thế:

<div class="canvas-container" style="position: relative" width="293px"> 
    <canvas class="upper-canvas"></canvas> 
    <canvas class="lower-canvas" id="c"></canvas> 
</div> 

Các gói div cũng như cả hai phần tử canvas đều nhận được thẻ kiểu và chiều rộng cố định/chiều cao. Về mặt khởi tạo, tôi chỉ tìm thấy canvas.setWdith mà chỉ lấy giá trị số (không có giá trị phần trăm).

Có cách nào để khởi tạo Vải để tôn trọng/sử dụng chiều rộng 100% nhất định không?

Cập nhật: Ví dụ: http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

Tôi không chắc chắn nếu bạn có thể nói một cách rõ ràng Vải để sử dụng 100% chiều rộng, nhưng có lẽ có được chiều rộng của canvas-container qua $('.canvas-container').width() hoặc document.getElementById('canvas-container').clientWidth, và sau đó sử dụng canvas.setWidth trên giá trị đó ? Ví dụ .:

canvas.setWidth($('.canvas-container').width()); 

Protip: cũng nhớ để thiết lập này trên cửa sổ thay đổi kích cỡ để ngăn chặn bất kỳ tràn của nội dung.

Answer 2

Do bản chất của canvas element, width và height cần được sử dụng bằng pixel. Vì vậy, Vải sẽ không sử dụng giá trị phần trăm cho canvas.

attribute unsigned long width;

attribute unsigned long height;

vải

Answer 3

thay đổi kích thước vải bằng cách sử dụng đối tượng và cửa sổ của nó innerWidth và innerHeight

(function(){ 
    var canvas = new fabric.Canvas('app'); 

    window.addEventListener('resize', resizeCanvas, false); 

    function resizeCanvas() { 
    canvas.setHeight(window.innerHeight); 
    canvas.setWidth(window.innerWidth); 
    canvas.renderAll(); 
    } 

    // resize on init 
    resizeCanvas(); 
})();