i2djs中如何将path元素attr属性的d值设置为自定义变量

基础变量赋值修正 #

你只需将d属性的硬编码字符串替换为你的变量名即可，不要给变量加引号：

var nodes = renderer.createEls(answers1, { 
   el: "path",
   attr: {
      d: answers1, // 直接写变量名替换原有硬编码路径
   },
   style: {
      lineWidth: 5,
      strokeStyle: "#f00000",
      shadowColor: "red",
      lineCap: "round",
   },
}).animatePathTo({
   duration: 100,
   loop: 1,
   ease: "linear",
   direction: "alternate",
});

动态监听输入更新动画的完整实现 #

如果需要实现输入框内容变化时自动切换对应路径动画，可参考如下逻辑：

// 提前建立字符和对应路径的映射表，按需求补全所有字符的映射
const charPathMap = {
  'b': 'M20,36 v-32 v14 a2.6,2 1 0 1 2,16',
  'a': '此处填写a对应的路径字符串',
  '1': '此处填写1对应的路径字符串'
}

let currentNodes = null
// 替换为你实际的input元素选择器
const inputEl = document.querySelector('#your-input-id')
inputEl.addEventListener('input', e => {
  const inputVal = e.target.value.trim().toLowerCase()
  // 输入为空或者没有对应路径映射时直接返回
  if (!inputVal || !charPathMap[inputVal]) return

  // 销毁之前创建的旧节点，避免重复渲染
  if (currentNodes) {
    currentNodes.remove()
  }

  // 赋值路径到自定义变量
  const answers1 = charPathMap[inputVal]
  // 重新创建节点和动画
  currentNodes = renderer.createEls(answers1, { 
    el: "path",
    attr: {
      d: answers1,
    },
    style: {
      lineWidth: 5,
      strokeStyle: "#f00000",
      shadowColor: "red",
      lineCap: "round",
    },
  }).animatePathTo({
    duration: 100,
    loop: 1,
    ease: "linear",
    direction: "alternate",
  });
})

额外注意事项 #

如果renderer.createEls方法的第一个参数是需要创建的元素数量，不要把路径变量作为第一个参数传入，仅将路径变量赋值给d属性即可：

// 第一个参数传入你需要创建的path元素数量，单个路径就传1
var nodes = renderer.createEls(1, { 
   el: "path",
   attr: {
      d: answers1,
   },
   // 其余配置保持不变
})

内容的提问来源于stack exchange，提问作者Bryan