时间戳

首页 > 解决方案 > 将纸张js转换为javascript

javascript - 将纸张js转换为javascript

问题描述

下面是我试图在圆圈网格上实现色调属性的代码。

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/

标签： javascriptpaperjs

解决方案

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

您需要确保circles在定义之前不要尝试访问。如果无法预测您的paperscript何时准备就绪，您可以在 paperscript 运行时使用回调来通知外部 JS。例如，如果您将其添加到您的paperscript：

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

...你可以把你的JS包装在这个：

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

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

您的 CodePen 的更新在这里

推荐阅读