svg 三次贝塞尔曲线演示

马黑黑 · 发表于 2023-9-28 20:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-9-28 20:43

本帖最后由马黑黑于 2023-9-28 23:43 编辑

说明：

曲线开始于 {10,200}，终止于 {390,200}（画布尺寸 400*400）。

两个控制点：

① 第一个控制点：红色圆点，初始位置是 {10,10}
② 第二个控制点：紫色圆点，初始位置是 {390,10}

两个控制点可以依次挪动，挪动方法是在相应控制点按下鼠标左键不放，拖曳其到预设地点，然后松开鼠标左键。任意控制点的每一个移动均能影响曲线的样式。

理论上，控制点不受画布尺寸或坐标系影响，详情请看后续回复。

马黑黑 · 发表于 2023-9-28 20:44

一楼示例代码：

<style>
#stage { border: 1px solid gray; }
#stage > path { fill: none; stroke: steelblue; }
#stage > circle { fill: red; cursor: pointer; }
#stage > circle:nth-of-type(2) { fill: purple; }
</style>
<svg id="stage" width="400" height="400">
<path id="cPath" d="M10 200 C10 10, 390 10, 390 200"></path>
<circle id="c1" cx="10" cy="10" r="5"></circle>
<circle id="c2" cx="390" cy="10" r="5"></circle>
</svg>
<div id="pathMsg"></div>
<script>
let movAr = [0,0];
let setAttr = (ar) => ar.forEach((item) => item[0].setAttribute(item[1],item[2]));
c1.onmousedown = () => movAr = [1,0];
c2.onmousedown = () => movAr = [0,1];
document.onmouseup = () => movAr = [0,0];
pathMsg.innerText = '路径：' + cPath.getAttribute('d');
stage.onmousemove = (e) => {
if (movAr[0])
setAttr([
[c1,'cx',e.offsetX],
[c1,'cy',e.offsetY],
[cPath,'d',`M10 200 C${e.offsetX} ${e.offsetY}, ${c2.getAttribute('cx')} ${c2.getAttribute('cy')}, 390 200`],
]);
if (movAr[1])
setAttr([
[c2,'cx',e.offsetX],
[c2,'cy',e.offsetY],
[cPath,'d',`M10 200 C${c1.getAttribute('cx')} ${c1.getAttribute('cy')}, ${e.offsetX} ${e.offsetY}, 390 200`],
]);
if(movAr[0] || movAr[1]) pathMsg.innerText = '路径：' + cPath.getAttribute('d');
};
</script>

复制代码

马黑黑 · 发表于 2023-9-28 20:49

附: 三次贝塞尔曲线语句结构

{x0,y0} {x1,y1} {x2,y2} {xy}

其中：

x0 y0 : 曲线起点
x1,y1 : 曲线第一控制点
x2,y2 : 曲线第二控制点
x,y : 曲线终点

svg路径中，x0 y0 对应于 M x y；第一、二控制点和终点对应于 Cx1 y1, x2 y2, x y