从外部文件运行PaperScript / JavaScript不起作用

Question

I'm exploring the Paper.js library. The first code example in the tutorial works fine. But when I move the inline javascript to an external file, as in the second code snippet, it stops displaying anything on the screen. In myScript.js, I tried

paper.install(window);
window.onload = function() {
 // Create a Paper.js Path to draw a line into it:
    var path = new Path();
    // Give the stroke a color
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    // Move to start and draw a line from there
    path.moveTo(start);
    // Note the plus operator on Point objects.
    // PaperScript does that for us, and much more!
    path.lineTo(start + [ 100, -50 ]);

    }

And using jQuery

$(document).ready(function(){
 // Create a Paper.js Path to draw a line into it:
    var path = new Path();
    // Give the stroke a color
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    // Move to start and draw a line from there
    path.moveTo(start);
    // Note the plus operator on Point objects.
    // PaperScript does that for us, and much more!
    path.lineTo(start + [ 100, -50 ]);

    });

with no success. What did I forget? Thank you for you help

Answer 1

You either need to refer to a paperscript file or jump through the hoops needed to use javascript directly, as documented at http://paperjs.org/tutorials/getting-started/using-javascript-directly

Here's a fiddle using jquery, paper, coffeescript that may give you a few ideas: http://jsfiddle.net/tATps/

$('#foo').text(paper);
canvas = $("#myCanvas")[0];
paper.setup(canvas);
path = new paper.Path.Rectangle(10, 10, 20, 10);
path.strokeColor = "black";
paper.view.draw();

path = new paper.Path.Circle(40, 40, 20);
path.strokeColor = "black";
paper.view.draw();

tool = new paper.Tool()

@view = paper.view
size = view.size
@normalCenter = view.size.divide 2

tool.onMouseMove = (event) =>    
    view.zoom = 2 # yes, I set the zoom every time instead of once.  lazy.
    p = event.point.clone()
    p.x = Math.max p.x, 0
    p.y = Math.max p.y, 0
    movement = @normalCenter.subtract(view.center )
    movement = movement.add p.subtract(@normalCenter).divide(2)
    view.scrollBy(movement)
    $('#foo').text([p, view.center])

Answer 2

If this is related to https://en.wikipedia.org/wiki/Same-origin_policy you need to load the page from a local HTTP server, or disable that check in your browser. Any of the following are a quick way to setup a local web server.

# Python <3
python -m SimpleHTTPServer

# Python 3
python -m http.server

# NodeJS
npm install http-server -g  # install
http-server                 # run