Element canvas nie zmienia rozmiaru, gdy używasz ReactJS i PaperJS razem

Question

Odkryłem, że elementy canvas poprawnie zmieniają rozmiar na rozmiar okna, gdy znajdują się wewnątrz komponentów reagowania. Zmieniają one również poprawnie rozmiar, gdy są używane z PaperJS. Jednak nie zmieniają rozmiaru, gdy są używane razem z PaperJS i ReactJS.

Czy jest to niezgodność między PaperJS i ReactJS, czy też nieprawidłowo generuję PaperJS? Nazywam paper.setup (canvas) w funkcji componentDidMount komponentu reagującego, który zawiera element canvas. Czy to właściwe miejsce, aby to zrobić?

Poniżej zamieściłem opisy kodów.

Uwaga: Z jakiegoś powodu funkcja "Kod ułamkowy kodu" narzeka na fragmenty kodu ReactJS, więc dodałem linki JSFiddle, które działają poprawnie.

PaperJS Tylko [SUKCESU] - Płótno zmienia rozmiar w oknie rozmiaru 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 Tylko [SUKCES] - Płótno zmienia rozmiar w oknie rozmiaruhttps://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] - Płótno nie zmiana rozmiaru okna na rozmiar 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ędziesz musiał użyć data-paper-resize rekwizyt, ponieważ React nie rozpoznaje podpórki resize.

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

Zobacz Canvas Configuration i Supported Attributes.