Question

我正在尝试将PaperJS库与我的ReactJS项目一起使用。

似乎我遇到了尚未安装组件的问题，我试图通过PaperJS访问该组件的画布。（参考：TypeError _currentStyle null）

我的React组件是：

import React from "react";
import Paper from "paper";
import Helmet from "react-helmet";

class AnimationCanvas extends React.Component {
    constructor(props){
        super(props);
    }

    animate(){
        var path = new Paper.Path();
        path.strokeColor = 'black';
        var start = new Paper.Point(100, 100);
        path.moveTo(start);
        path.lineTo(start + [ 100, -50 ]);
    }

    render() {
        return (
            <div id="AnimationCanvas">
                <Helmet>
                    <script type="text/paperscript" canvas="myCanvas">
                    {this.animate()}
                    </script>
                </Helmet>
                <canvas id="myCanvas" resize="true"></canvas>
            </div>
        );
    }
}

export default AnimationCanvas;

Helmet将“Helmet”元素中的任何内容放入html的头部。

这是PaperJS Example

之后的内容

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
    var path = new Path();
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    path.moveTo(start);
    path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>
</html>

如何在确保画布加载后以符合React的方式运行paperscript？

在组件安装后加载脚本依赖关系

0 个答案: