L'elemento Canvas non viene ridimensionato quando si utilizzano insieme ReactJS e PaperJS

Question

Ho riscontrato che gli elementi canvas vengono ridimensionati correttamente al ridimensionamento della finestra quando sono all'interno dei componenti di reazione. Inoltre, vengono ridimensionati correttamente se utilizzati con PaperJS. Tuttavia, non vengono ridimensionate se utilizzate insieme a PaperJS e ReactJS.

Si tratta di un'incompatibilità tra PaperJS e ReactJS o sto istanziando PaperJS in modo errato? Sto chiamando paper.setup (canvas) nella funzione componentDidMount del componente react che contiene l'elemento canvas. È il posto giusto per farlo?

Ho incluso frammenti di codice qui sotto.

Nota: per qualche motivo la funzione "Esegui snippet di codice" si lamenta dei frammenti di ReactJS, quindi ho incluso i collegamenti JSFiddle che funzionano correttamente.

PaperJS Solo [SUCCESSO] - Tela ridimensiona sulla finestra ridimensionare 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 Solo [SUCCESSO] - Tela ridimensiona sulla finestra ridimensionarehttps://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] - Tela non ridimensiona sulla finestra ridimensionare 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

dovrete utilizzare il puntello data-paper-resize, dal momento che Reagire non riconosce il puntello resize.

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

Vedi Canvas Configuration e Supported Attributes.