бумага JS в JavaScript - PullRequest
Новая
       5

бумага JS в JavaScript

0 голосов
/ 20 сентября 2018

Ниже приведены коды, с помощью которых я пытался получить свойство оттенка на сетке кругов.

var circles = [];

for(var i=20 ; i<=1500 ; i+=100){
  for(var j=40 ; j<=600 ; j+=110){
    var newCircle = new Path.Circle(new Point(i, j), 20);
    newCircle.fillColor = 'red';
    circles.push(newCircle);
  }
}

function onFrame(event){
  for(var i=0 ; i<circles.length ; i++ ){
    circles[i].fillColor.hue += 1;
  }
}

Это код.Сейчас я пытаюсь назначить разные цвета каждому кругу, используя функцию случайного цвета, которую я создал в отдельном файле JS, но переменные типа «num» не доступны в этом файле js. Я не могу связать их.

Это ссылка на кодовый блок: https://codepen.io/akashyap/pen/qMgpGQ

Я не могу разобраться в разделе «Использование papercript напрямую с javascript»:

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

1 Ответ

0 голосов
/ 20 сентября 2018

Вы столкнулись с проблемой синхронизации.Когда ваш обычный JS работает, circles еще не определен.Это потому, что ваш бумажный скрипт находится внутри элемента <script type="text/paperscript">.Это изначально не поддерживается браузером, поэтому он не будет запущен сразу.Скорее всего, через некоторое время после загрузки paper.js он в конечном итоге читает ваш элемент скрипта и интерпретирует его.

Вам необходимо убедиться, что вы не пытаетесь получить доступ к circles до его определения.Если он будет непредсказуемым, когда ваш papercript будет готов, вы можете использовать callback , чтобы уведомить внешний JS о запуске paperScript.Например, если вы добавите это в свой текст: 

if (window.onCirclesReady)
  window.onCirclesReady(circles);

... вы можете заключить JS в следующее: 

window.onCirclesReady = circles => {
  // Code here
};

Это решает две проблемы.Во-первых, вы знаете, что ваш код JS не будет работать до тех пор, пока не будет запущен paperScript.Во-вторых, вы передаете массив circles, поэтому вам не нужно использовать глобальную переменную, чтобы сделать его доступным.Вы можете расширить обратный вызов для передачи дополнительных данных по мере необходимости.

Обновления для вашего CodePen находятся здесь

...