如何在浏览器中更改简单 oblong/line 的长度、厚度和曲率？

Question

过去六个月我一直在后端工作，我已经好几年没有在前端进行图形处理了，所以我正在寻找关于这个问题的指导，因为我什至不确定是哪一个头的方向。我已经用谷歌搜索了一个小时，但我发现出现的 none 正是我要找的东西——我突然意识到我什至不确定什么我正在寻找。

我们的客户想要一个页面，其中一个简单的长方形图像由三个滑块修改，每个滑块代表长度、宽度和 'bend'，（见附图）。

我不确定该怎么做 -- 我的想法是 'SVG'，尽管我过去没有使用过 SVG。我可以使用 CSS 修改现有的 SVG 图像吗？来自 Greensock 的 MorphSVGPlugin (https://greensock.com/docs/v2/Plugins/MorphSVGPlugin) 会是我最好的选择吗？我过去曾与 Greensock 合作过，但如果它对我正在尝试做的事情来说太过分了，我现在就不会了。

感谢任何线索！

Answer 1

我没有对直线使用 L 命令，而是对二次贝塞尔曲线使用 Q 命令。

请阅读代码中的注释。

let angle = 2.5;// line's angle
let R,//line's length/2
r;//line's curvature. In the begining r=0 (no curvature)



R = ~~strokeLength.value/2;
r = ~~itr.value;
thePath.style.strokeWidth = strokeWidth.value
thePath.setAttribute("d",getD(R,r));

//set the stroke's width
strokeWidth.addEventListener("input",()=>{
  thePath.style.strokeWidth = strokeWidth.value
})
//set the stroke's length
strokeLength.addEventListener("input",()=>{
 R = ~~strokeLength.value/2;
 thePath.setAttribute("d",getD(R,r))
})
//set the stroke's curvature
itr.addEventListener("input",()=>{
 r = ~~itr.value;
 thePath.setAttribute("d",getD(R,r))
})

//a function to calculate the new d attribute
function getD(R,r){
  let p1 = {//move to this point
    x:R*Math.cos(angle),
    y:R*Math.sin(angle)
  }
  
  let p2 = {//end the curve in this point
    x:R*Math.cos(angle + Math.PI),
    y:R*Math.sin(angle + Math.PI)
  }
  
  let pc = {//calculate the control point for the bézier
    x:r*Math.cos(angle + Math.PI/2),
    y:r*Math.sin(angle + Math.PI/2)
  }
  
  let d = `M${p1.x},${p1.y}Q${pc.x},${pc.y} ${p2.x},${p2.y}`;
  return d;
}

svg{border:solid; float:left; margin:10px}
span{display:inline-block; width:130px;}

<svg viewBox="-100 -100 200 200" width="200">
  <path id="thePath" d="M-80,80L80,-80" stroke="skyBlue" stroke-width="10" stroke-linecap="round" fill="none" />
</svg>
<p><span>stroke's width</span><input id="strokeWidth" type="range" min="1" max="30" value="10"/></p>
<p><span>stroke's length</span><input id="strokeLength" type="range" min="0" max="200" value="50"/></p>
<p><span>stroke's curvature</span><input id="itr" type="range" min="-200" max="200" value="0"/></p>

如何在浏览器中更改简单 oblong/line 的长度、厚度和曲率？

How can I change the length, thickness and curvature of a simple oblong/line in the browser?

css

animation

svg

graphics

gsap