[英]How can I write a Paper.js script in a different file from html? (I've followed the library's instruction but it still isn't working)
It seems silly, but it is annoying. 这看起来很傻,但很烦人。 I am using VScode and I am trying to code a js script in a different file to get the highlight syntax, but it isn't working (I could change the json content as suggested in another stackoverflow question and enter it inline, but I would like to have a separated file).
我正在使用VScode,我正在尝试在不同的文件中编写一个js脚本来获取突出显示语法,但它不起作用(我可以按照另一个stackoverflow问题中的建议更改json内容并输入内联,但我会喜欢有一个单独的文件)。
The files are all in the same folder: 这些文件都在同一个文件夹中:
If I try to run the html page with the script inline, the chrome loads smoothly 如果我尝试使用内联脚本运行html页面,则chrome会平滑加载
The circles.html with script inline 使用脚本内联的circles.html
circles.html circles.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas">
// 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 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
But when I try to get a separate file to this script (like suggested in http://paperjs.org/tutorials/getting-started/working-with-paper-js/ ), the browser gives error 但是当我尝试将一个单独的文件添加到此脚本时(如http://paperjs.org/tutorials/getting-started/working-with-paper-js/中所示 ),浏览器会出错
The circles.html and circles.js, in different files circle.html和circles.js,位于不同的文件中
circles.html circles.html
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<link rel="stylesheet" type="text/css" href="circles.css">
<!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
<script type="text/paperscript" canvas="myCanvas" src="circles.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
circles.js circles.js
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'red';
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 ]);
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';
The browser alerts: 浏览器提醒:
Error 1: 错误1:
Access to XMLHttpRequest at 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
request @ paper-full.js:13929
paper-full.js:13929
Error 2: 错误2:
Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js'.
at Object.request (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:13929:14)
at HTMLCollection.loadScript (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16957:10)
at HTMLCollection.forIn (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:56:11)
at Function.each (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:75:7)
at loadAll (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16974:8)
Warning: 警告:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
request @ paper-full.js:13905
I've tried some answers through google about this error, but none of them really solved it, it seems I am hurting the http protocol. 我已经通过谷歌尝试了一些关于这个错误的答案,但他们都没有真正解决它,似乎我正在伤害http协议。 How should I fix it, what am I missing?
我应该怎么解决它,我错过了什么?
PaperScript code is loaded just like any other JavaScript using the <script>
tag, except for the type being set to "text/paperscript" or "text/x-paperscript" . PaperScript代码的加载方式与使用
<script>
标记的任何其他JavaScript一样,但设置为“text / paperscript”或“text / x-paperscript”的类型除外。 The code can either be an external file (src="URL"), or inlined: 代码可以是外部文件(src =“URL”),也可以是内联文件:
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
// 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 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
If we copy the inlined code to a file called js/myScript.js we can rewrite the above example to load the external file instead. 如果我们将内联代码复制到名为js / myScript.js的文件中,我们可以重写上面的示例来加载外部文件。
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas">
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
Source : http://paperjs.org/tutorials/getting-started/working-with-paper-js/ 资料来源: http : //paperjs.org/tutorials/getting-started/working-with-paper-js/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.