Skip to content

Instantly share code, notes, and snippets.

@adihimself

adihimself/index.html

Last active January 20, 2016 13:18
Show Gist options
  • Save adihimself/f5bdec486805aa13e00e to your computer and use it in GitHub Desktop.
Save adihimself/f5bdec486805aa13e00e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adihimself revised this gist Jan 20, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions myjson.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"point_1":[{"x":"10", "y":"10"}],"point_2":[{"x":"50", "y":"50"}]}
  2. adihimself created this gist Jan 20, 2016.
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <!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>
    21 changes: 21 additions & 0 deletions mypaperscript.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    $(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
    }

    });