理解二次贝塞尔曲线
本帖最后由 马黑黑 于 2023-6-30 12:43 编辑 <br /><br /><style>.mysvg { display: block; margin: 10px auto; width: 600px; height: 600px; border: 1px solid gray; }
</style>
<p>二次贝塞尔曲线由三组XY坐标描述：d="M<span style="color:red">100,300</span> Q<span style="color:blue">300,300</span> <span style="color:green">500,300</span>"，红色组通过M指令定位，是曲线的开始点；另两组由Q指令带出，蓝色组为曲线的控制点，绿色组是曲线的终点。<br><br></p>
<p>如果控制点在中央，则二次贝塞尔曲线其实是直线（如下面所示，紫色圆圈的圆心是控制点）。想象一下它是一根能整体弯曲的小钢丝线，头尾两端保持固定不变，现在，尝试改变控制点的XY坐标值，看看会发生什么：<br><br></p>
<svg class="mysvg">
<path id="myPath" d="M100,300 Q300,300 500,300" fill="none" stroke="red" />
<circle id="circ" cx="300" cy="300" r="4" fill="purple" />
</svg>
<p id="msgBox" style="text-align:center">路径：</p>
<p>
<label for="controlX">控制点X坐标: </label>
<input type="range" id="controlX" min="-200" max="800" step="1" value="300" oninput="cX.value=controlX.value" />
<output id="cX" for="controlX">300</output>
</p>
<p>
<label for="controlX">控制点Y坐标: </label>
<input type="range" id="controlY" min="-300" max="900" step="1" value="300" oninput="cY.value=controlY.value" />
<output id="cY" for="controlX">300</output>
</p>
<p><br><br>【说明】控制点标识特定情况下会消失，因为它已经跑到了svg画布外面去了。</p>
<script>
let pathStr = window.getComputedStyle(myPath).getPropertyValue('d');
msgBox.innerText = '路径: ' + pathStr;
controlX.onchange = controlY.onchange = () => {
pathStr = `M100,300 Q${controlX.value},${controlY.value} 500,300`;
circ.setAttribute('cx',controlX.value);
circ.setAttribute('cy',controlY.value);
myPath.setAttribute('d',pathStr);
msgBox.innerText = '路径: ' + pathStr;
};
</script>
欣赏精彩制作！ 又是一个实用的工具，通过控制点的变化，可以直接看到二次贝塞尔曲线的变化呢{:4_199:} X不动，可以很清楚地看出对称曲线在Y变化的情况下的变化。{:4_187:} 谢谢老师的精彩分享，问好！{:4_190:} 梦缘 发表于 2023-6-30 17:14
谢谢老师的精彩分享，问好！
下午好 红影 发表于 2023-6-30 13:43
又是一个实用的工具，通过控制点的变化，可以直接看到二次贝塞尔曲线的变化呢
通过观察，慢慢理解曲线 红影 发表于 2023-6-30 13:44
X不动，可以很清楚地看出对称曲线在Y变化的情况下的变化。
嗯嗯 <p>看看：🍃</p> 这个不懂{:4_198:} 小辣椒 发表于 2023-6-30 18:02
这个不懂
拉两下底部的滑杆就懂了 黑师强悍，做成动画形式了。。。看上去更加直观 南无月 发表于 2023-6-30 18:05
黑师强悍，做成动画形式了。。。看上去更加直观
能帮助理解就好
马黑黑 发表于 2023-6-30 17:54
通过观察，慢慢理解曲线
嗯这曲线还是很漂亮的。 马黑黑 发表于 2023-6-30 18:02
看看：🍃
这个就是新帖子里的那个播放器按钮吧。{:4_173:} 红影 发表于 2023-6-30 21:21
这个就是新帖子里的那个播放器按钮吧。
对。论坛使用gbk编码，不能直接显示，自动转换成了编码符号。 红影 发表于 2023-6-30 21:20
嗯这曲线还是很漂亮的。
不是漂亮不漂亮的问题，而是控制点与曲线形状的关系 马黑黑 发表于 2023-6-30 21:23
对。论坛使用gbk编码，不能直接显示，自动转换成了编码符号。
就是你说的emoji字符吧。 马黑黑 发表于 2023-6-30 21:23
不是漂亮不漂亮的问题，而是控制点与曲线形状的关系
嗯，这个帖子能够看的非常直观。 红影 发表于 2023-6-30 21:43
嗯，这个帖子能够看的非常直观。
领会控制点与曲线形态的关系问题，就能理解了二次贝塞尔曲线的原理