在jQuery getJSON之后加载PaperScript

时间:2016-01-20 11:05:09

标签: javascript jquery json paperjs

我想将一篇论文JS Path作为getJSON回调。我的代码可以工作,但要渲染我必须用鼠标悬停在<canvas>上的路径。脚本也应该在移动设备上工作,所以我需要让脚本在页面加载时工作而不需要鼠标交互。这是我的代码:

$(function() {
    paper.install(window);
    var jsonURL = "http://www.domain.com/file.json";

    $.getJSON( jsonURL, function (data){
        paper.setup('myCanvas');
        var point_1_x = data['point1']['x'];
        var point_1_y = data['point1']['y'];
        var point_2_x = data['point1']['x'];
        var point_2_y = data['point1']['y'];

        var myPath = new Path();
        myPath.strokeWidth = 10;
        myPath.strokeColor = 'black';
        myPath.add(new Point(point_1_x,point_1_y));
        myPath.add(new Point(point_2_x,point_2_y));

        paper.PaperScript.load(); // I tried this one
    }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tool</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.js"></script>
    <script type="text/javascript" src="mypaperscript.js"></script>
</head>
<body>
    <div class="wrapper">
        <canvas id="myCanvas" keepalive="true"></canvas>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

问题解决了:

添加paper.view.update();到getJSON();

的末尾