三次贝塞尔曲线在线绘制工具2
本帖最后由 匿名 于 2024-9-11 18:14 编辑 <br /><br /><style>#pa { margin: 20px auto; padding: 0; width: 500px; height: 300px; min-width: 100px; min-height: 100px; max-width: 760px; max-height: 600px; border: 1px solid gray; resize: both; overflow: hidden; }
#stage circle { cursor: pointer; }
#sizeMsg { transform: translateY(15px); }
#pathMsg:active { user-select: all; }
.msgbox { margin: 0 auto; width: 400px; font: normal 18px/24px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
</style>
</head>
<body>
<div id="sizeMsg" class="msgbox">400*400</div>
<div id="pa" data-size="400*400">
<svg id="stage" width="400" height="400">
<path id="cPath" fill="none" stroke="steelblue"></path>
<g>
<title>起点</title>
<circle id="start" cx="10" cy="200" r="5" fill="teal"></circle>
</g>
<g>
<title>控制点1</title>
<circle id="c1" cx="10" cy="10" r="5" fill="red"></circle>
</g>
<g>
<title>控制点2</title>
<circle id="c2" cx="390" cy="10" r="5" fill="purple"></circle>
</g>
<g>
<title>终点</title>
<circle id="end" cx="390" cy="200" r="5" fill="teal"></circle>
</g>
</svg>
</div>
<div id="pathMsg" class="msgbox"></div>
<p><br><br></p>
<p style="text-align: right;"><a href="http://mhh.52qingyin.cn/api/svg/cbezier.html">《三次贝塞尔曲线在线制作》</a>独立页面<br><br></p>
<script>
var balls = ;
var currentball = null;
var ro = new ResizeObserver(elms => {
var rect = elms.contentRect;
var data = {
stage: { w: stage.getAttribute('width'), h: stage.getAttribute('height') },
start: { x : start.getAttribute('cx'), y: start.getAttribute('cy') },
c1: { x : c1.getAttribute('cx'), y: c1.getAttribute('cy') },
c2: { x : c2.getAttribute('cx'), y: c2.getAttribute('cy') },
end: { x : end.getAttribute('cx'), y: end.getAttribute('cy') },
};
setPos(stage, 'width', rect.width);
setPos(stage, 'height', rect.height);
setPos(start, 'cx', (data.start.x * rect.width / data.stage.w).toFixed(2));
setPos(start, 'cy', (data.start.y * rect.height / data.stage.h).toFixed(2));
setPos(c1,'cx', (data.c1.x * rect.width / data.stage.w).toFixed(2));
setPos(c1, 'cy', (data.c1.y * rect.height / data.stage.h).toFixed(2));
setPos(c2, 'cx', (data.c2.x * rect.width / data.stage.w).toFixed(2));
setPos(c2, 'cy', (data.c2.y * rect.height / data.stage.h).toFixed(2));
setPos(end, 'cx', (data.end.x * rect.width / data.stage.w).toFixed(2));
setPos(end, 'cy', (data.end.y * rect.height / data.stage.h).toFixed(2));
cPath.setAttribute('d', setPath(start,c1,c2,end));
pathMsg.innerText = `d='${cPath.getAttribute('d')}'`;
pathMsg.style.setProperty('width', rect.width + 'px');
sizeMsg.style.setProperty('width', rect.width + 'px');
sizeMsg.innerText = rect.width + '*'+ rect.height;
});
ro.observe(pa);
setPath = (e1,e2,e3,e4) => `M${e1.getAttribute('cx')} ${e1.getAttribute('cy')},C${e2.getAttribute('cx')} ${e2.getAttribute('cy')},${e3.getAttribute('cx')} ${e3.getAttribute('cy')},${e4.getAttribute('cx')} ${e4.getAttribute('cy')}`;
setPos = (elm,name, val) => elm.setAttribute(name, val);
balls.forEach(ball => {
ball.onmousedown = () => currentball = ball;
ball.onmouseup = () => currentball = null;
});
document.onmouseup = () => currentball = null;
stage.onmousemove = (e) => {
if(!currentball) return;
setPos(currentball, 'cx', e.offsetX);
setPos(currentball, 'cy', e.offsetY);
cPath.setAttribute('d', setPath(start,c1,c2,end));
pathMsg.innerText = `d='${cPath.getAttribute('d')}'`;
};
</script> 本帖最后由 马黑黑 于 2024-9-11 18:21 编辑
之前有过一个三次贝塞尔曲线绘制帖子，两头固定。这次四个点均可改变，盒子尺寸也可以改变。想要更大尺寸的请访问独立页面。 马黑黑 发表于 2024-9-11 18:13
之前有过一个三次贝塞尔曲线绘制帖子，两头固定。这次四个点均可改变，盒子尺寸也可以改变。想要更大尺寸的 ...
看得笑，咋还匿名发帖啊，还是头一次看到这样的发帖方式呢{:4_173:} 红影 发表于 2024-9-11 19:27
看得笑，咋还匿名发帖啊，还是头一次看到这样的发帖方式呢
不小心点对的{:4_173:} 一点点调着各个点，感受着线条的变化以及和下面位置数字的对应。
好像两个控制点在线条的两边的时候，是最常见的三次贝塞尔曲线的样子{:4_204:} 这样的绘制工具真好。黑黑制作辛苦了{:4_190:} 哪里能匿名，厉害了。。。点评都点不了。。。 马黑黑 发表于 2024-9-11 18:13
之前有过一个三次贝塞尔曲线绘制帖子，两头固定。这次四个点均可改变，盒子尺寸也可以改变。想要更大尺寸的 ...
这个是万向三次贝。。{:4_173:} 花飞飞 发表于 2024-9-11 20:04
这个是万向三次贝。。
这么理解也成 花飞飞 发表于 2024-9-11 20:03
哪里能匿名，厉害了。。。点评都点不了。。。
{:4_173:} 马黑黑 发表于 2024-9-11 19:38
不小心点对的
这功能我好像还从来没注意过{:4_173:} 红影 发表于 2024-9-11 20:53
这功能我好像还从来没注意过
功能都摆在那里 马黑黑 发表于 2024-9-11 20:54
功能都摆在那里
但不一定去用了，就像手机，哪怕老版本的，也很多功能大家没用过的呢。 红影 发表于 2024-9-11 20:59
但不一定去用了，就像手机，哪怕老版本的，也很多功能大家没用过的呢。
没有好奇心。不过好奇心也害死猫 马黑黑 发表于 2024-9-11 21:00
没有好奇心。不过好奇心也害死猫
对电子设备的好奇心，倒不会伤害到猫儿，最多让设备趴窝{:4_173:} 红影 发表于 2024-9-11 21:16
对电子设备的好奇心，倒不会伤害到猫儿，最多让设备趴窝
那也挺好的，可以以旧换新 马黑黑 发表于 2024-9-11 22:22
那也挺好的，可以以旧换新
哈哈，这个洒脱，心态真好{:4_187:} 红影 发表于 2024-9-12 10:29
哈哈，这个洒脱，心态真好
应该酱紫的 马黑黑 发表于 2024-9-12 12:27
应该酱紫的
虽然都是应该，能做到的就是本事呢{:4_187:} 马黑黑 发表于 2024-9-11 20:18
这么理解也成
小白的直观理解方法{:4_173:}
页:
[1]
2