i2djs 将属性 {d} 设置为变量

Question

我正在尝试创建一个项目，我需要能够更改输入标签内的内容，并且程序将创建一个动画，其中您输入的字母或数字。例如，如果您输入小写字母，则会显示 “B”代码是

M20,36 v-32 v14 a2.6,2 1 0 1 2,16

这就是我所拥有的 answers1 是我在 attr: d

中需要的变量

var nodes = renderer.createEls(answers1, { 
   el: "path",
   attr: {
      d: 'M0,20  l10,16 l10,-16',  
   },
   style: {
      lineWidth: 5,
      strokeStyle: "#f00000",
      shadowColor: "red",
      lineCap: "round",
   },
}).animatePathTo({
   duration: 100,
   loop: 1,
   ease: "linear",
   direction: "alternate",
});
      

我觉得答案非常简单，但我在过去的五个小时里找不到答案。

Answer 1

创建路径节点，并保留其引用。然后使用引用来制作动画并更改路径。

var pathNode = renderer.createEl({ 
   el: "path",
   attr: {
       d: 'M0,20  l10,16 l10,-16',  
   },
   style: {
      lineWidth: 5,
      strokeStyle: "#f00000",
      shadowColor: "red",
      lineCap: "round",
   },
})

# animate Path
pathNode.animatePathTo({
   duration: 100,
   loop: 1,
   ease: "linear",
   direction: "alternate",
});

# Change Path
pathNode.setAttr("d", 'M20,36 v-32 v14 a2.6,2 1 0 1 2,16' )