Question

我正在探索Paper.js库。 tutorial中的第一个代码示例工作正常。但是当我将内联javascript移动到外部文件时，就像在第二个代码片段中一样，它停止在屏幕上显示任何内容。在myScript.js中，我尝试了

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 ]);

    }

使用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 ]);

    });

没有成功。我忘记了什么？谢谢你的帮助

Answer 1

您需要参考一个paperscript文件或跳过直接使用javascript所需的箍，如下所述 http://paperjs.org/tutorials/getting-started/using-javascript-directly

这是一个使用jquery，paper，coffeescript的小提琴，可能会给你一些想法： 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

如果这与https://en.wikipedia.org/wiki/Same-origin_policy有关，则需要从本地HTTP服务器加载页面，或在浏览器中禁用该检查。以下任何一种都是设置本地Web服务器的快捷方法。

# Python <3
python -m SimpleHTTPServer

# Python 3
python -m http.server

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

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

2 个答案: