Paper.js庫不工作沒有錯誤

我想運行一個paperjs網站的例子，但是當我運行本地服務器時，我只是得到一個沒有錯誤的空白屏幕。我使用bower來安裝庫，並且鏈接到正確的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 } 
 
} 
 
}

來源

2017-05-13 Hobbes

你在你的HTML有一個錯字文檔。該生產線

<script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>

缺少結束>打開關閉標籤</script>

來源

2017-05-13 19:03:35 Ivo

謝謝你！現在它仍然是空白的，但有一個錯誤。控制檯打印出「主線程上的同步XMLHttpRequest已被棄用，因爲它對最終用戶的體驗有不利影響。」我該如何解決？它是否與我的paperjs版本有關？錯誤是針對paper-full.js文件的。 – Hobbes

這是一個完整的單獨問題，您可以在其中找到答案：http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr – Ivo

Paper.js庫不工作沒有錯誤

回答

相關問題