0
paperjsのWebサイトのサンプルを実行しようとしていますが、ローカルサーバーを実行すると、エラーのない空白の画面が表示されます。私は、ライブラリをインストールするためにバウアーを使い、私は正しいpaperjsソースファイルにリンクしています。ここに私のコードは次のとおりです。Paper.jsライブラリがエラーなしで動作しない
のindex.html：
<!DOCTYPE html>
<html>
\t <head>
<script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>
<script type="text/paperscript" src="csim.js" canvas="myCanvas"></script>
\t </head>
\t <body>
<canvas id="myCanvas"></canvas>
\t </body>
</html>csim.js：
paper.install(window);
window.onload = function() {
paper.setup(document.getElementById("myCanvas"));
var values = {
\t paths: 50,
\t minPoints: 5,
\t maxPoints: 15,
\t minRadius: 30,
\t maxRadius: 90
};
var hitOptions = {
\t segments: true,
\t stroke: true,
\t fill: true,
\t tolerance: 5
};
createPaths();
function createPaths() {
\t var radiusDelta = values.maxRadius - values.minRadius;
\t var pointsDelta = values.maxPoints - values.minPoints;
\t for (var i = 0; i < values.paths; i++) {
\t \t var radius = values.minRadius + Math.random() * radiusDelta;
\t \t var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
\t \t var path = createBlob(view.size * Point.random(), radius, points);
\t \t var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
\t \t var hue = Math.random() * 360;
\t \t path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
\t \t path.strokeColor = 'black';
\t };
}
function createBlob(center, maxRadius, points) {
\t var path = new Path();
\t path.closed = true;
\t for (var i = 0; i < points; i++) {
\t \t var delta = new Point({
\t \t \t length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
\t \t \t angle: (360/points) * i
\t \t });
\t \t path.add(center + delta);
\t }
\t path.smooth();
\t return path;
}
var segment, path;
var movePath = false;
function onMouseDown(event) {
\t segment = path = null;
\t var hitResult = project.hitTest(event.point, hitOptions);
\t if (!hitResult)
\t \t return;
\t if (event.modifiers.shift) {
\t \t if (hitResult.type == 'segment') {
\t \t \t hitResult.segment.remove();
\t \t };
\t \t return;
\t }
\t if (hitResult) {
\t \t path = hitResult.item;
\t \t if (hitResult.type == 'segment') {
\t \t \t segment = hitResult.segment;
\t \t } else if (hitResult.type == 'stroke') {
\t \t \t var location = hitResult.location;
\t \t \t segment = path.insert(location.index + 1, event.point);
\t \t \t path.smooth();
\t \t }
\t }
\t movePath = hitResult.type == 'fill';
\t if (movePath)
\t \t project.activeLayer.addChild(hitResult.item);
}
function onMouseMove(event) {
\t project.activeLayer.selected = false;
\t if (event.item)
\t \t event.item.selected = true;
}
function onMouseDrag(event) {
\t if (segment) {
\t \t segment.point += event.delta;
\t \t path.smooth();
\t } else if (path) {
\t \t path.position += event.delta;
\t }
}
}
ありがとう終了タグを開く前に閉じる
>が欠落しています！今はまだ空ですが、エラーがあります。コンソールは、「メインスレッド上の同期XMLHttpRequestは、エンドユーザーの経験に有害な影響を与えるため、廃止されました」と表示します。これをどうやって解決するのですか？それは私のバージョンのペーパーと関係がありますか？エラーは、paper-full.jsファイルです。 – Hobbesそれはあなたが既に答えを見つけることができる全く別の質問です：http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr – Ivo