Question

我被SVG的方法和工具所震撼，并希望找到一种超级简单的方法来定位和绘制一个棒图狗的尾巴＆＃34;五个＆＃34;骨头＆＃34;。现在每个都可以是一条线或矩形。我希望每个子骨骼都能从其父骨骼中进行可设置的旋转。你也可以把它想象成五段蛇。

例如，如果骨头＆＃39;旋转是10,10,10,10,10然后尾部曲线平滑下来，像一个圆圈。如果旋转是-20，-10,0,10,20那么尾部有一个＆＃34; S＆＃34-曲线形状。我喜欢有一个可以做到这一点的静态页面，但理想情况下我想为五个骨骼中的每一个都有某种文本框/滑块，或者至少是如何引用和调整的示例通过JavaScript的骨头。是否有一个非常简单的方法可以使这个尾巴？我会使用一个库，如果有一个真正为这种情况增加价值的库，但首选简单/小。谢谢！

Answer 1

是的，让每个骨骼成为前一个骨骼的“孩子”。

这是一个SVG示例。将代码段设为全屏以查看输入。

function adjustTail(evt)
{
  var name = evt.target.getAttribute('name');
  var val = evt.target.value;
  console.log("name="+name+" val="+val);
  var xform = (name=="s1") ? "" : "translate(50,0) ";
  xform += "rotate(" + val + ")";
  document.getElementById(name).setAttribute("transform", xform);
  return false;
}


document.getElementById("i1").addEventListener("change", adjustTail);
document.getElementById("i2").addEventListener("change", adjustTail);
document.getElementById("i3").addEventListener("change", adjustTail);
document.getElementById("i4").addEventListener("change", adjustTail);
document.getElementById("i5").addEventListener("change", adjustTail);

input {
  width: 3em;
}

<svg width="500" height="300">

  <g id="tail1" stroke="black" stroke-width="10" fill="none" transform="translate(100,150)"> 

    <g id="s1" transform="rotate(-20)">
      <line x1="0" y1="0" x2="50" y2="0"/>
      <g id="s2" transform="translate(50,0) rotate(-10)">
        <line x1="0" y1="0" x2="50" y2="0"/>
        <g id="s3" transform="translate(50,0) rotate(0)">
          <line x1="0" y1="0" x2="50" y2="0"/>
          <g id="s4" transform="translate(50,0) rotate(10)">
            <line x1="0" y1="0" x2="50" y2="0"/>
            <g id="s5" transform="translate(50,0) rotate(20)">
              <line x1="0" y1="0" x2="50" y2="0"/>
            </g>
          </g>
        </g>
      </g>
    </g>
    
  </g>
  

</svg>

<div>
  <input id="i1" type="text" name="s1" value="-20">
  <input id="i2" type="text" name="s2" value="-10">
  <input id="i3" type="text" name="s3" value="0">
  <input id="i4" type="text" name="s4" value="10">
  <input id="i5" type="text" name="s5" value="20">
</div>

如何旋转孩子＆＃34;骨头＆＃34;在SVG的狗尾巴？

1 个答案: