Как я могу написать скрипт Paper.js в файле, отличном от HTML?(Я следовал инструкциям библиотеки, но она все еще не работает) - PullRequest
0 голосов
/ 13 июня 2019

Это кажется глупым, но это раздражает. Я использую VScode и пытаюсь закодировать js-скрипт в другой файл, чтобы получить синтаксис выделения, но он не работает (я мог бы изменить содержимое json, как предложено в другом вопросе stackoverflow, и ввести его в строку, но я бы хотел хотел бы иметь отдельный файл).

Все файлы находятся в одной папке:

  • бумажный full.js
  • circles.js
  • circles.html

Если я пытаюсь запустить html-страницу со встроенным скриптом, хром загружается плавно

круги.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>

Но когда я пытаюсь получить отдельный файл для этого скрипта (как предложено в http://paperjs.org/tutorials/getting-started/working-with-paper-js/),, браузер выдает ошибку

Circles.html и circle.js, в разных файлах

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

// 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';

Оповещения браузера:

Ошибка 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

Ошибка 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)

Внимание:

[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

Я попробовал некоторые ответы через Google об этой ошибке, но никто из них не решил ее, похоже, мне больно протокол http. Как мне это исправить, чего мне не хватает?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...