二次贝塞尔曲线在线绘制

马黑黑 · 发表于 2024-9-10 11:56

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

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

x

本帖最后由马黑黑于 2024-9-10 13:23 编辑

代码：

<style>
#pa { margin: 20px auto; padding: 0; width: 400px; height: 400px; min-width: 100px; min-height: 100px; border: 1px solid gray; resize: both; overflow: hidden; position: relative; }
#stage > circle { cursor: pointer; }
#sizeMsg { transform: translateY(20px); }
#pathMsg:active { user-select: all; }
.msgbox { margin: 0 auto; width: 400px; font: normal 18px/24px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
</style>
<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" d="M10 200, C10 10, 390 10, 390 200" fill="none" stroke="steelblue"></path>
<circle id="start" cx="10" cy="200" r="5" fill="teal"></circle>
<circle id="c1" cx="200" cy="10" r="5" fill="red"></circle>
<circle id="end" cx="390" cy="200" r="5" fill="teal"></circle>
</svg>
</div>
<div id="pathMsg" class="msgbox"></div>
<script>
var balls = [start, c1, end];
var currentball = null;
var ro = new ResizeObserver(elms => {
var rect = elms[0].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') },
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(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,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) => `M${e1.getAttribute('cx')} ${e1.getAttribute('cy')},Q${e2.getAttribute('cx')} ${e2.getAttribute('cy')},${e3.getAttribute('cx')} ${e3.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,end));
pathMsg.innerText = `d='${cPath.getAttribute('d')}'`;
};
</script>

复制代码

链接：二次贝塞尔曲线在线绘制 (52qingyin.cn)

马黑黑 · 发表于 2024-9-10 12:03

两端的线头、控制点都可以拖曳。控制点被限制在svg场景中，实际上它可以脱离svg元素，但这样一来会看不到也控制不了控制点，所以简化了；如果需要更陡峭的控制点数值，可以在拿到路径后修改控制点的值。

盒子可以改变大小，操作入口在右下角，向右下或左上拖曳，盒子会变大变小，盒子的尺寸信息实时呈现在盒子的左上方。

三次贝塞尔曲线在线绘制正在测试中，最迟明天发布。