我发现当canvas元素位于react组件内时,canvas元素会在窗口调整大小时正确调整大小.与PaperJS一起使用时,它们也可以正确调整大小.但是,与PaperJS和ReactJS一起使用时,它们不会调整大小.
这是PaperJS和ReactJS之间的不兼容还是我错误地实例化PaperJS？我在包含canvas元素的react组件的componentDidMount函数中调用paper.setup(canvas).这是正确的地方吗？
我在下面列出了代码段.
注意:出于某种原因,"运行代码片段"功能会在ReactJS代码段上出现问题,因此我已经包含了JSFiddle链接,它们可以正常工作.
PaperJS Only [SUCCESS] - Canvas在窗口调整大小时调整大小 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 Only …