2012-11-01 29 views
8

Tôi đã sử dụng phần tử canvas và tôi tạo đối tượng vải từ đó. Bây giờ, tôi muốn thay đổi màu nền động. Những điều sau không hiệu quả với tôi.Cần thay đổi màu nền vải khi sử dụng vải js

var x; 

x = new fabric.Canvas("mycanvas", { 
     backgroundColor : "#fff", 
     selection: true 
    }); 

x.backgroundColor = "#f00"; 

Màu nền trắng và không đổi thành màu đỏ.

+3

bạn đã cố gắng 'x.renderTop() 'hoặc' x. renderAll() 'sau khi chọn thuộc tính? –

+0

Điều đó làm việc cho tôi .. Cảm ơn eicto .. Plz thêm này như là câu trả lời. – viji

Trả lời

16

Bạn cần phải làm cho vải sau khi thay đổi thuộc tính, bởi vì thuộc tính của đối tượng chỉ là tài sản và không được xử lý bằng sự kiện

http://jsfiddle.net/oceog/gDhht/

var canvas = new fabric.Canvas('c',{backgroundColor : "#0ff"}); 
console.log(canvas); 
canvas.backgroundColor="red"; 
canvas.renderTop(); 
canvas.add(
  new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }), 
  new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }), 
  new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' }) 
); 

canvas.backgroundColor="green"; 
canvas.renderAll(); 
​ 
+0

Rất lạ Tôi đã sử dụng canvas.setBackgroundColor và màu sắc không ảnh hưởng đến cho đến khi tôi thay đổi lại. Sau đó, tôi đã thử điều này và nó đã làm việc. lỗi? –

+1

[xem ví dụ này (nó không phải của tôi)] (http://jsfiddle.net/fabricjs/hXzvk/) họ sử dụng renderAll để thiết lập màu sắc, –

+0

Tôi thấy những gì họ đang làm, là có một cách ưa thích để làm điều này hoặc tiêu cực cho một trong hai hoặc kể từ khi cả hai đều làm việc? –