Yếu tố canvas không thay đổi kích thước khi sử dụng ReactJS và PaperJS cùng nhau

Question

Tôi đã tìm thấy các thành phần canvas chính xác thay đổi kích thước khi thay đổi kích thước cửa sổ khi chúng ở bên trong các thành phần phản ứng. Chúng cũng thay đổi kích thước một cách chính xác khi được sử dụng với PaperJS. Tuy nhiên, chúng không thay đổi kích thước khi được sử dụng với PaperJS và ReactJS cùng nhau.

Đây có phải là sự không tương thích giữa PaperJS và ReactJS hoặc tôi khởi tạo PaperJS không chính xác? Tôi đang gọi paper.setup (canvas) trong chức năng componentDidMount của thành phần phản ứng có chứa phần tử canvas. Đó có phải là địa điểm chính xác để làm điều này không?

Tôi đã bao gồm đoạn mã bên dưới.

Lưu ý: Vì lý do nào đó, tính năng "Đoạn mã chạy" phàn nàn về các đoạn mã ReactJS, vì vậy tôi đã bao gồm các liên kết JSFiddle hoạt động tốt.

PaperJS Chỉ [THÀNH CÔNG] - Canvas thay đổi kích thước trên cửa sổ thay đổi kích thước https://jsfiddle.net/eadlam/srmracev/

// Instantiate the paperScope with the canvas element 
 
var myCanvas = document.getElementById('myCanvas'); 
 
paper.setup(myCanvas); 
 

 
// Draw a circle in the center 
 
var width = paper.view.size.width; 
 
var height = paper.view.size.height; 
 
var circle = new paper.Shape.Circle({ 
 
    center: [width/2, height/2], 
 
    fillColor: 'grey', 
 
    radius: 10 
 
}); 
 

 
// render 
 
paper.view.draw();

canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: solid 1px red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-core.min.js"></script> 
 
<canvas id="myCanvas" resize="true"></canvas>

ReactJS Chỉ [THÀNH CÔNG] - Canvas thay đổi kích thước trên cửa sổ thay đổi kích thướchttps://jsfiddle.net/eadlam/0de1mpoa/

var Canvas = React.createClass({ 
 
    render: function() { 
 
    return <canvas id="myCanvas" resize="true"></canvas>; 
 
    } 
 
}); 
 

 
React.render(<Canvas/>, document.getElementById('container'));

canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: solid 1px red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> 
 
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
 

 
<div id="container"></div>

ReactJS + CanvasJS [FAIL] - Canvas không thay đổi kích thước trên cửa sổ thay đổi kích thước https://jsfiddle.net/eadlam/jLo3opgq/

var Canvas = React.createClass({ 
 

 
    componentDidMount: function() { 
 
     // Instantiate the paperScope with the canvas element 
 
     var myCanvas = document.getElementById('myCanvas'); 
 
     paper.setup(myCanvas); 
 
     
 
     // Draw a circle in the center 
 
     var width = paper.view.size.width; 
 
     var height = paper.view.size.height; 
 
     var circle = new paper.Shape.Circle({ 
 
      center: [width/2, height/2], 
 
      fillColor: 'grey', 
 
      radius: 10 
 
     }); 
 
     
 
     // render 
 
     paper.view.draw(); 
 
    }, 
 

 
    render: function() { 
 
     return <canvas id="myCanvas" resize="true"></canvas>; 
 
    } 
 
}); 
 

 
React.render(<Canvas/>, document.getElementById('container'));

canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: solid 1px red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> 
 
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-core.min.js"></script> 
 

 
<div id="container"></div>

Answer 1

Bạn sẽ phải sử dụng các data-paper-resize prop, vì Phản ứng không nhận diện được resize chống đỡ.

<canvas id="myCanvas" data-paper-resize /> 

Xem Canvas Configuration và Supported Attributes.