Canvas 同时使用 ReactJS 和 PaperJS 时元素不会调整大小

Question

我发现 canvas 元素在 window resize 时正确地调整大小，当它们在反应组件中时。当与 PaperJS 一起使用时，它们也可以正确调整大小。但是，当与 PaperJS 和 ReactJS 一起使用时，它们不会调整大小。

这是 PaperJS 和 ReactJS 之间的不兼容，还是我错误地实例化了 PaperJS？我在 paper.setup(canvas) 中调用包含 canvas 元素。这是执行此操作的正确位置吗？

我在下面包含了代码片段。

注意：出于某种原因，"Run code snippet" 功能会在 ReactJS 片段上出现问题，因此我包含了工作正常的 JSFiddle 链接。

仅限 PaperJS [成功] - Canvas 调整大小 window 调整大小 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 [成功] - Canvas 调整大小 window 调整大小 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 + HMTL5 Canvas [FAIL] - Canvas 在 window resize 时不调整大小 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 Configuration and Supported Attributes。

Answer 2

一种解决方法，例如：

创建论文canvas元素：

import React from 'react'
import paper from 'paper'
import './paperCanvas.css'

class PaperCanvas extends React.Component{
    constructor(props){
        super(props)
        // modify state with functions if necessary, and inherit objects from props
        this.state = {
            height: window.innerHeight,
            width: window.innerWidth,
            circle: undefined
        }
        this.updateDimensions = this.updateDimensions.bind(this);
        this.resizeMethod = this.resizeMethod.bind(this)
    }

    componentDidMount(){
        paper.setup('paperCanvas')
        this.state.circle = new paper.Path.Circle({
            center: paper.view.center,
            radius: 50,
            fillColor: 'orange'
        })
        paper.view.draw()
        window.addEventListener('resize', this.resizeMethod)
    }

    updateDimensions() {
        this.setState({
           height: window.innerHeight,
           width: window.innerWidth
         });
    }

    resizeMethod(){
        this.updateDimensions()
        this.state.circle.position = new paper.Point(this.state.width/2, this.state.height/2)
        console.log(this.state.width/2, this.state.height/2)
    }

    render(){
        return(
            <canvas id="paperCanvas" 
                height={this.state.height}
                width={this.state.width}>
            </canvas>
        )
    }
}

export default PaperCanvas

在paperCanvas.css中：

#paperCanvas {
    position: absolute;
    background: transparent;
    left: 0px;
    top: 0px;
    z-index: 0; 
}

Canvas 同时使用 ReactJS 和 PaperJS 时元素不会调整大小

Canvas element does not resize when using ReactJS and PaperJS together

html

javascript

canvas

paperjs

reactjs