Question

我是Java语言的新手，因此决定尝试使用I2Djs-SVG-通过CodePen上的代码进行无限彩虹转换，以尝试更好地理解某些东西。

我遇到了以下错误：

未捕获的ReferenceError：在Drawing.js：1中未定义i2d

我不知道如何解决该问题，将不胜感激。

HTML

 <!DOCTYPE html>
   <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="E:\Projects\DrawingLoop\css\Drawing.css">
      <script src=E:\Projects\DrawingLoop\scripts\Drawing.js> </script>

<title>Drawing</title>
</head>
<body>
   <div id="Mycanvas"></div>
</body>
</html>

CSS

@charset "UTF-8";

   html,body { 
   height: 100%;
   width: 100%;
  }
  #Mycanvas {
   height: 100%;
   width: 100%;
   background: black;
 }

JavaScript

 var renderer_ = i2d.SVGLayer('#Mycanvas', {
  events: false,
  selectiveClear: false
});
    //*I have no idea what this is so lets learn with eachother*//
    var parallelChain = i2d.chain.parallelChain().loop(100)
    var circlesCount = 50
    var radius = 50

    var g = renderer_.createEl({
     el: 'group',
      attr: {
      transform:{
       translate: [renderer_.width / 2, renderer_.height / 2]
      }
     }
   })

     g.createEls((new array(circlesCount)).fill().map(function(d, i) {
       return i
    }), {
        el: 'circle',
         attr: {
            r: 5,
            cx: 0,
            cy: 0
   },
   style: {
    fil: function(d) {
      return 'hsl(' + ((d % 100) / 50) * 300 + ',70%, 50%)'
      }
    }
  })
    .exec(animateEachCircle)

    function animateEachCircle(d) {
       parallelChain.add(this.animateExe({
         duration: 1800,
         delay: (d % 50) *30,
         ease: 'easeInOutSin',
         attr: function(f){
          this.setAttr({
      cx: radius * Math.cos(f * Math.PI * 2 + Math.floor(d / 50)) + (- 
         radius + Math.floor(d / 50) * radius * 2),
      cy: radius * Math.sin(f * Math.PI * 2 + Math.PI * Math.floor(d / 50))
        })
      }
     }))
   }

   parallelChain.start()

Answer 1

您似乎错过了在代码中包含 i2djs 库的情况。一旦包含I2d，它将作为全局对象可用。 I2dJs带有UMD支持。

https://i2djs.github.io/I2Djs/dist/i2d.js

I2d附带了许多功能性API，可在所有不同的渲染上下文（SVG，Canvas和WebGL）中使用。其中一种是连锁机制-并行和序列链，它有助于轻松定义复杂的动画依赖项。

I2djs链接示例：https://codepen.io/nswamy14/pen/Mdwppr?&page=1 （内嵌详细说明）

并行链：-您可以将多个可执行文件组合在一起以同时执行。

let chainInstance = i2d.chain.parallelChain();
chainInstance.loop() //to set the number of times the chain needs to be executed.
chainInstance.duration() // How long you want to execute the chain. Duration will remain same across all executables.
chainInstance.ease() //To set Ease on chain Execution.
chainInstance.end() // to set callback method, which will be triggered on chain completion

顺序链：-您可以将多个可执行文件分组以按顺序执行。

let chainInstance = i2d.chain.sequenceChain();
chainInstance.loop() //to set the number of times the chain needs to be executed.
chainInstance.duration() // How long you want to execute the chain. Duration will be split across all the executables.
chainInstance.ease() //To set Ease on chain Execution.
chainInstance.end() // to set callback method, which will be triggered on chain completion

您甚至可以拥有嵌套链-就像链中的链。

如果需要更多信息，请告诉我。

P.S。我将尽快更新文档。

更新：请通过-I2Djs Medium article

Answer 2

将此文件“ i2d.js”添加到脚本中作为脚本源，然后导入该文件 https://i2djs.github.io/I2Djs/dist/i2d.js 或直接在此网站上使用

未捕获的ReferenceError：未在Drawing.js：1上定义i2d

2 个答案: