将ReactJS和PaperJS一起使用时,Canvas元素不会调整大小

Question

我发现当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 [SUCCESS] - Canvas在窗口调整大小时调整大小 https://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不会在窗口调整大小时调整大小 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

你必须使用data-paper-resize道具,因为React不承认resize道具.

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

请参见Canvas配置和支持的属性.