时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：i2d 未在 Drawing.js:1 中定义

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

问题描述

我是 javascript 新手，并决定尝试 I2Djs - SVG - Infinite Rainbow，通过 codePen 上的代码尝试更好地理解某些事情。

我遇到了以下错误：

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

我不知道如何解决它一些帮助和解释将不胜感激。

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()

标签： javascriptjqueryhtmlcss

解决方案

看起来您错过了在代码中包含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

你甚至可以有嵌套链——就像链中的链。

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

PS 我会尽快更新文档。

更新：请通过 - I2Djs Medium 文章

推荐阅读