Fabric.js thay đổi kích thước canvas của tôi để 300x150 sau khi khởi

Question

HTML:

<div class="canvas-wrapper"> 
    <canvas id="myCanvas"></canvas> 
    </div> 

CSS

.canvas-wrapper { 
    width: 900px; 
    min-height: 600px; 
} 

#myCanvas{ 
    border:1px solid red; 
    position: absolute; 
    top:22px; 
    left:0px; 
    height: 100%; 
    width: 99%; 
} 

JS

var myCanvas = new fabric.Canvas('myCanvas'); 

canvas của tôi bị thay đổi kích cỡ để 300x150 sau khi nó được khởi tạo, tại sao?

Answer 1

trong phiên bản mới nhất, bạn sẽ phải làm một cái gì đó như:

var canvas = new fabric.Canvas('myCanvas'); 
canvas.setHeight(500); 
canvas.setWidth(800); 

.... Mã của bạn ....

canvas.renderAll(); 

Làm việc tốt cho tôi ..

Answer 2

Khi khởi tạo canvas, Vải đọc thuộc tính chiều rộng/chiều cao trên phần tử canvas hoặc mất chiều rộng/chiều cao được chuyển trong tùy chọn.

var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 }); 

hay:

<canvas width="900" height="600"></canvas> 
... 
var myCanvas = new fabric.Canvas('myCanvas'); 

Answer 3

Một câu trả lời thực sự cho câu hỏi này, không liên quan đến một kích thước tĩnh mới nhưng thực tế cho phép CSS để có hiệu quả-là một trong những tùy chọn sau:

1. Trong CSS, bạn có thể ghi đè lên các thuộc tính cá nhân và sau đó với! quan trọng; nhược điểm này là bất kỳ định nghĩa hơn nữa cũng phải sử dụng quan trọng hoặc họ sẽ bị bỏ qua:

[width], [height], [style] 
{ 
    width:  100vw!important; 
    min-height: 100vh!important; 
} 

2. Sử dụng JQuery bạn có thể thiết lập các giá trị tài sản inline để một sản phẩm nào chuỗi. Bạn có lẽ có thể đạt được điều này mà không có JQuery, nhưng tôi sẽ để nó như là một bài tập cho bạn.

Javascript (JQuery):

$('[style]').attr( 'style', function(index, style){ return ''; }); 
$('[height]').attr('height', function(index, height){ return ''; }); 
$('[width]').attr( 'width', function(index, height){ return ''; }); 

CSS:

*, *:before, *:after 
{ 
    box-sizing: border-box; 
} 

body 
{ 
    width:  100vw; 
    min-height: 100vh; 
    padding: 0; 
    margin:  0; 
} 

.canvas-container, 
canvas 
{ 
    width:  inherit; 
    min-height: inherit; 
} 

canvas.lower-canvas 
{ 
    position: absolute; 
    top:  0; 
} 

Sau đó, CSS sẽ được áp dụng như mong đợi.

Đó là dường như cũng cần thiết để nói Vải về sự thay đổi:

function sizeCanvas() 
{ 
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
    var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 
    canvas.setHeight(height) 
    canvas.setWidth(width) 
} 

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

function initDraw() 
{ 
    // setup 
} 

function draw() 
{ 
    canvas.renderAll(); 
} 

sizeCanvas(); 
initDraw(); 

này sẽ cấu hình vải với kích thước khung nhìn và giữ cho nó có kích thước phù hợp nếu nó thay đổi kích thước.

Nó đáng chú ý rằng vấn đề này phát sinh vì hai lý do:

1. Có người nghĩ đó là một ý tưởng tốt để sử dụng phong cách nội tuyến và nên bị khiển trách nặng nề, như không có tình huống mà đây là bao giờ một thích hợp thực hành.

2. Vải thay đổi sắp xếp DOM và tổ chức canvas gốc trong div mới bằng canvas lồng nhau thứ hai, điều này có thể dẫn đến điều bất ngờ.