0

我正在探索 Paper.js 库。本教程中的第一个代码示例运行良好。但是，当我将内联 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 ]);

    });

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

4

2 回答 2

0

您要么需要参考 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])
于 2013-03-07T19:32:12.310 回答
0

如果这与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
于 2016-02-12T15:33:20.290 回答