上海建站网站建设,新华路街道网站建设,wordpress前台注册 邀请码,网站排名优化课程三次贝塞尔曲线,二次贝塞尔曲线有什么区别 https://blog.csdn.net/xiaoyao961/article/details/148678265
SVG 贝塞尔曲线可视化设计器 下面是一个简单的贝塞尔曲线可视化设计器#xff0c;使用 HTML5 和 JavaScript 实现。这个设计器允许你通过拖动控制点来实时调整贝塞尔曲…三次贝塞尔曲线,二次贝塞尔曲线有什么区别 https://blog.csdn.net/xiaoyao961/article/details/148678265
SVG 贝塞尔曲线可视化设计器 下面是一个简单的贝塞尔曲线可视化设计器使用 HTML5 和 JavaScript 实现。这个设计器允许你通过拖动控制点来实时调整贝塞尔曲线的形状。 这个贝塞尔曲线设计器具有以下特点 直观的交互可以直接拖动起点、终点和控制点来调整曲线形状 曲线类型切换支持二次贝塞尔曲线和三次贝塞尔曲线 辅助线显示可以显示或隐藏控制点之间的连接线帮助理解曲线形成原理 颜色自定义可以更改曲线的颜色 导出功能可以将当前曲线导出为 SVG 文件 坐标显示实时显示鼠标位置和控制点坐标 响应式设计适配不同屏幕尺寸 您可以通过拖动各个点来观察曲线的变化直观地理解贝塞尔曲线的形成原理。这对于网页设计、动画制作和游戏开发等领域都非常有用。 script srchttps://cdn.tailwindcss.com/script3.4.16.js link hrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.css relstylesheet
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title贝塞尔曲线可视化设计器/titlescript src3.4.16.js/scriptlink hreffont-awesome.min.css relstylesheetscripttailwind.config {theme: {extend: {colors: {primary: #3B82F6,secondary: #10B981,accent: #F59E0B,dark: #1F2937,},fontFamily: {inter: [Inter, sans-serif],},}}}/scriptstyle typetext/tailwindcsslayer utilities {.content-auto {content-visibility: auto;}.bezier-control {cursor: move;transition: r 0.2s, fill 0.2s;}.bezier-control:hover {r: 8;fill: #F59E0B;}.bezier-handle {cursor: move;opacity: 0.5;transition: r 0.2s, fill 0.2s;}.bezier-handle:hover {r: 6;fill: #F59E0B;}.bezier-path {fill: none;stroke-width: 3;stroke-linecap: round;stroke-linejoin: round;}.bezier-guide {stroke-dasharray: 5,5;stroke-width: 1;stroke-opacity: 0.5;}}/style
/head
body classbg-gray-100 font-inter min-h-screen flex flex-colheader classbg-white shadow-md py-4 px-6div classcontainer mx-autoh1 classtext-2xl font-bold text-dark flex items-centeri classfa fa-curve mr-2 text-primary/i贝塞尔曲线可视化设计器/h1/div/headermain classflex-1 container mx-auto p-4 flex flex-col md:flex-row gap-6!-- 控制面板 --div classmd:w-1/4 bg-white rounded-lg shadow p-4h2 classtext-lg font-semibold mb-4 flex items-centeri classfa fa-sliders text-primary mr-2/i曲线控制/h2div classmb-4label classblock text-sm font-medium text-gray-700 mb-1曲线类型/labelselect idcurveType classw-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50option valuecubic三次贝塞尔曲线/optionoption valuequadratic二次贝塞尔曲线/option/select/divdiv idcubicControls classmb-4label classblock text-sm font-medium text-gray-700 mb-1显示辅助线/labeldiv classflex items-center space-x-4label classinline-flex items-centerinput typecheckbox idshowGuides classform-checkbox h-5 w-5 text-primary rounded checkedspan classml-2 text-sm text-gray-700显示控制线/span/label/div/divdiv classmb-4label classblock text-sm font-medium text-gray-700 mb-1曲线颜色/labelinput typecolor idcurveColor classw-full h-10 border border-gray-300 rounded-md value#3B82F6/divdiv classmt-6button idresetBtn classw-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-centeri classfa fa-refresh mr-2/i重置曲线/button/divdiv classmt-4button idexportBtn classw-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-centeri classfa fa-download mr-2/i导出SVG/button/div/div!-- 绘图区域 --div classmd:w-3/4 flex-1 bg-white rounded-lg shadow overflow-hiddendiv classp-4 border-b border-gray-200 flex justify-between items-centerh2 classtext-lg font-semibold flex items-centeri classfa fa-paint-brush text-primary mr-2/i绘图区域/h2div classtext-sm text-gray-500span idcoordinateDisplay坐标: -/span/div/divdiv classrelative!-- SVG 绘图区域 --svg idbezierCanvas classw-full h-[600px] bg-gray-50 viewBox0 0 800 600!-- 网格背景 --pattern idgrid width20 height20 patternUnitsuserSpaceOnUsepath dM 20 0 L 0 0 0 20 fillnone stroke#eee stroke-width0.5//patternrect width100% height100% fillurl(#grid)/!-- 贝塞尔曲线 --path idbezierPath classbezier-path stroke#3B82F6 d/!-- 控制线辅助线 --line idcontrolLine1 classbezier-guide stroke#9CA3AF x10 y10 x20 y20 /line idcontrolLine2 classbezier-guide stroke#9CA3AF x10 y10 x20 y20 /!-- 控制点 --circle idstartPoint classbezier-control cx100 cy300 r6 fill#3B82F6 /circle idendPoint classbezier-control cx700 cy300 r6 fill#3B82F6 /!-- 二次贝塞尔曲线控制点 --circle idcontrolPoint1 classbezier-handle cx400 cy150 r5 fill#10B981 /!-- 三次贝塞尔曲线控制点默认隐藏 --circle idcontrolPoint2 classbezier-handle cx400 cy450 r5 fill#10B981/circle/svg/div/div/mainfooter classbg-dark text-white py-4 mt-6div classcontainer mx-auto px-4 text-center text-smp贝塞尔曲线可视化设计器 copy; 2025/p/div/footerscript// 初始化变量let isDragging false;let selectedElement null;let offset { x: 0, y: 0 };let curveType cubic;let showGuides true;// 获取DOM元素const svg document.getElementById(bezierCanvas);const bezierPath document.getElementById(bezierPath);const startPoint document.getElementById(startPoint);const endPoint document.getElementById(endPoint);const controlPoint1 document.getElementById(controlPoint1);const controlPoint2 document.getElementById(controlPoint2);const controlLine1 document.getElementById(controlLine1);const controlLine2 document.getElementById(controlLine2);const curveTypeSelect document.getElementById(curveType);const showGuidesCheckbox document.getElementById(showGuides);const curveColorInput document.getElementById(curveColor);const resetBtn document.getElementById(resetBtn);const exportBtn document.getElementById(exportBtn);const coordinateDisplay document.getElementById(coordinateDisplay);// 更新贝塞尔曲线function updateBezierCurve() {const startX parseFloat(startPoint.getAttribute(cx));const startY parseFloat(startPoint.getAttribute(cy));const endX parseFloat(endPoint.getAttribute(cx));const endY parseFloat(endPoint.getAttribute(cy));const cp1X parseFloat(controlPoint1.getAttribute(cx));const cp1Y parseFloat(controlPoint1.getAttribute(cy));const cp2X parseFloat(controlPoint2.getAttribute(cx));const cp2Y parseFloat(controlPoint2.getAttribute(cy));// 更新控制线if (showGuides) {controlLine1.setAttribute(x1, startX);controlLine1.setAttribute(y1, startY);controlLine1.setAttribute(x2, cp1X);controlLine1.setAttribute(y2, cp1Y);if (curveType cubic) {controlLine2.setAttribute(x1, cp2X);controlLine2.setAttribute(y1, cp2Y);controlLine2.setAttribute(x2, endX);controlLine2.setAttribute(y2, endY);}}// 更新曲线let pathData ;if (curveType quadratic) {pathData M ${startX},${startY} Q ${cp1X},${cp1Y} ${endX},${endY};} else {pathData M ${startX},${startY} C ${cp1X},${cp1Y} ${cp2X},${cp2Y} ${endX},${endY};}bezierPath.setAttribute(d, pathData);}// 处理SVG坐标function getSVGPoint(event) {const pt svg.createSVGPoint();pt.x event.clientX;pt.y event.clientY;return pt.matrixTransform(svg.getScreenCTM().inverse());}// 事件处理开始拖动function startDrag(event) {if (event.target.classList.contains(bezier-control) || event.target.classList.contains(bezier-handle)) {isDragging true;selectedElement event.target;const svgPoint getSVGPoint(event);const cx parseFloat(selectedElement.getAttribute(cx));const cy parseFloat(selectedElement.getAttribute(cy));offset.x svgPoint.x - cx;offset.y svgPoint.y - cy;svg.style.cursor grabbing;event.preventDefault();}}// 事件处理拖动中function drag(event) {if (isDragging) {const svgPoint getSVGPoint(event);const cx svgPoint.x - offset.x;const cy svgPoint.y - offset.y;// 限制在SVG画布内const svgRect svg.getBoundingClientRect();const newX Math.max(0, Math.min(cx, svgRect.width));const newY Math.max(0, Math.min(cy, svgRect.height));selectedElement.setAttribute(cx, newX);selectedElement.setAttribute(cy, newY);// 更新坐标显示coordinateDisplay.textContent 坐标: (${Math.round(newX)}, ${Math.round(newY)});// 更新曲线updateBezierCurve();}}// 事件处理结束拖动function endDrag() {isDragging false;selectedElement null;svg.style.cursor default;}// 事件处理曲线类型变更function handleCurveTypeChange() {curveType curveTypeSelect.value;if (curveType quadratic) {controlPoint2.style.display none;controlLine2.style.display none;} else {controlPoint2.style.display block;controlLine2.style.display block;}updateBezierCurve();}// 事件处理显示辅助线变更function handleShowGuidesChange() {showGuides showGuidesCheckbox.checked;controlLine1.style.display showGuides ? block : none;controlLine2.style.display showGuides curveType cubic ? block : none;}// 事件处理曲线颜色变更function handleCurveColorChange() {bezierPath.setAttribute(stroke, curveColorInput.value);startPoint.setAttribute(fill, curveColorInput.value);endPoint.setAttribute(fill, curveColorInput.value);}// 事件处理重置按钮function handleReset() {// 重置点位置startPoint.setAttribute(cx, 100);startPoint.setAttribute(cy, 300);endPoint.setAttribute(cx, 700);endPoint.setAttribute(cy, 300);controlPoint1.setAttribute(cx, 400);controlPoint1.setAttribute(cy, 150);controlPoint2.setAttribute(cx, 400);controlPoint2.setAttribute(cy, 450);// 重置曲线类型和颜色curveTypeSelect.value quadratic;curveType quadratic;curveColorInput.value #3B82F6;bezierPath.setAttribute(stroke, #3B82F6);startPoint.setAttribute(fill, #3B82F6);endPoint.setAttribute(fill, #3B82F6);// 更新显示controlPoint2.style.display none;controlLine2.style.display none;showGuidesCheckbox.checked true;showGuides true;// 更新曲线updateBezierCurve();}// 事件处理导出SVGfunction handleExport() {// 创建新的SVG元素const exportSvg svg.cloneNode(true);// 移除事件监听器和不必要的元素exportSvg.removeAttribute(style);exportSvg.removeAttribute(onmousedown);exportSvg.removeAttribute(onmousemove);exportSvg.removeAttribute(onmouseup);// 移除网格背景的pattern引用const rect exportSvg.querySelector(rect);if (rect) {rect.setAttribute(fill, white);}// 移除坐标显示相关元素const coordinateDisplay exportSvg.querySelector(#coordinateDisplay);if (coordinateDisplay) {coordinateDisplay.parentNode.removeChild(coordinateDisplay);}// 创建SVG字符串const svgData new XMLSerializer().serializeToString(exportSvg);// 创建下载链接const blob new Blob([svgData], {type: image/svgxml});const url URL.createObjectURL(blob);const a document.createElement(a);a.href url;a.download bezier-curve.svg;document.body.appendChild(a);a.click();setTimeout(() {document.body.removeChild(a);URL.revokeObjectURL(url);}, 0);}// 添加事件监听器svg.addEventListener(mousedown, startDrag);document.addEventListener(mousemove, drag);document.addEventListener(mouseup, endDrag);curveTypeSelect.addEventListener(change, handleCurveTypeChange);showGuidesCheckbox.addEventListener(change, handleShowGuidesChange);curveColorInput.addEventListener(input, handleCurveColorChange);resetBtn.addEventListener(click, handleReset);exportBtn.addEventListener(click, handleExport);// 初始化updateBezierCurve();handleShowGuidesChange();/script
/body
/html
