Question

以下是我尝试通过这些代码来实现圆形网格上的hue属性的代码。

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文件中创建的随机颜色函数为每个圆圈赋予不同的颜色，但是该js文件中无法访问“ num”之类的变量。我无法链接它们。

这是codepen的链接：https://codepen.io/akashyap/pen/qMgpGQ

我无法弄清楚以下内容的“在JavaScript中直接使用paperscript”部分：

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

Answer 1

您遇到了计时问题。当普通JS运行时，circles尚未定义。这是因为您的书面脚本位于<script type="text/paperscript">元素内。浏览器本身不支持此功能，因此不会立即运行。相反，在加载paper.js之后的一段时间，它最终会读取并解释脚本元素。

您需要确保在定义circles之前不要尝试访问它。如果您的 paperscript 准备就绪时无法预料，则可以在脚本运行后使用 callback 通知外部JS。例如，如果将其添加到您的脚本中：

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

...您可以在其中包装JS：

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

这解决了两个问题。首先，您知道您的JS代码只有在paperscript运行后才能运行。其次，您正在传递circles数组，因此您不必使用全局变量来使其可访问。您可以根据需要扩展回调以传递其他数据。

The updates to your CodePen are here

将纸张js转换为javascript

1 个答案: