Paper.js 라이브러리가 오류없이 작동하지 않습니다.

paperjs 웹 사이트 예제 중 하나를 실행하려고하지만 로컬 서버를 실행할 때 오류가없는 빈 화면이 나타납니다. bower를 사용하여 라이브러리를 설치했고 올바른 paperjs 소스 파일에 연결했습니다.Paper.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에 오타가 있습니다

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 여기 내 코드입니다 의사. 선은

<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 라이브러리가 오류없이 작동하지 않습니다.

답변

관련 문제