bezier-slider 1.0.2 → 1.0.3

package/README.md

@@ -618,14 +618,3 @@ console.log(BezierSlider.DEFAULTS);
 }
 ```
 
----
-
-## 版本记录
-
-| 版本 | 日期 | 说明 |
-|------|------|------|
-| v3.0 | 2026-06-10 | 支持 Vue 3；添加 `fadeEnabled` 参数；项目结构重构 |
-| v2.2 | 2026-06-09 | 支持图片/SVG/font-icon 多种图标；边界拉扯回弹 |
-| v2.1 | 2026-06-09 | 抽象公共组件；中文注释；动态布局 |
-| v2.0 | 2026-06-09 | 二次贝塞尔滑轨；弧度/间距/回调可配置 |
-| v1.0 | 2026-06-09 | 初始圆弧版本（已废弃） |

package/demo/index.html

@@ -41,7 +41,7 @@
             </div>
             <label class="demo-options" id="debugOption">
                 <input type="checkbox" id="showDebugTrack" checked />
-                显示轨迹调试线
+                显示轨迹调试线（含 P0–P2 控制点）
             </label>
             <div class="slider-compose" id="sliderCompose">
                 <div class="carousel-bg" id="carouselBg"></div>

package/demo/native-main.js

@@ -57,6 +57,29 @@ document.addEventListener('DOMContentLoaded', () => {
     let customBgUrl = null;
     let bgNaturalSize = { ...DEFAULT_BG_NATURAL };
     let displaySize = fitImageDisplaySize(bgNaturalSize.width, bgNaturalSize.height);
+    let activeControl = null;
+
+    function refreshDebugOverlay() {
+        if (!slider) return;
+        updateDebugTrack(
+            sliderMount,
+            slider.getLayoutState(),
+            showDebugTrack.checked,
+            BezierSlider,
+            activeControl
+        );
+    }
+
+    function setActiveControl(hint) {
+        activeControl = hint;
+        refreshDebugOverlay();
+        paramsForm.querySelectorAll('.param-row-cp').forEach((row) => {
+            const match = activeControl
+                && row.dataset.controlPoint === activeControl.point
+                && row.dataset.controlAxis === activeControl.axis;
+            row.classList.toggle('is-adjusting', Boolean(match));
+        });
+    }
 
     function getActiveBgUrl() {
         return customBgUrl;
@@ -144,7 +167,7 @@ document.addEventListener('DOMContentLoaded', () => {
             },
             onSlideEnd: (index) => console.log('停留下标:', index),
             onLayout: (layout) => {
-                updateDebugTrack(sliderMount, layout, showDebugTrack.checked, BezierSlider);
+                updateDebugTrack(sliderMount, layout, showDebugTrack.checked, BezierSlider, activeControl);
             }
         });
 
@@ -193,6 +216,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const unbindPanel = bindParamsPanel(paramsForm, {
         getParams: () => params,
         onParamChange: handleParamChange,
+        onControlPointAdjustStart: setActiveControl,
+        onControlPointAdjustEnd: () => setActiveControl(null),
         schema: PARAM_SCHEMA
     });
     const unbindGeometryBar = bindGeometryPresetBar(geometryPresetBar, {
@@ -235,9 +260,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     showDebugTrack.addEventListener('change', () => {
-        if (slider) {
-            updateDebugTrack(sliderMount, slider.getLayoutState(), showDebugTrack.checked, BezierSlider);
-        }
+        refreshDebugOverlay();
     });
 
     window.addEventListener('resize', () => {

package/demo/shared/demo-native.css

@@ -80,6 +80,45 @@
     height: 100%;
     pointer-events: none;
     z-index: 2;
+    overflow: visible;
+}
+
+.debug-track .debug-point-label,
+.debug-track .debug-axis-label,
+.debug-track .debug-point-hint {
+    pointer-events: none;
+    user-select: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.debug-track .debug-point-hint {
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.debug-track .debug-axis-label {
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.debug-track .debug-point-pulse {
+    animation: debug-point-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes debug-point-pulse {
+    0%, 100% { opacity: 0.3; transform: scale(1); transform-origin: center; transform-box: fill-box; }
+    50% { opacity: 0.75; transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
+}
+
+.param-row-cp.is-adjusting {
+    background: rgba(252, 211, 77, 0.08);
+    border-radius: 8px;
+    margin: 0 -6px;
+    padding: 4px 6px;
+}
+
+.param-row-cp.is-adjusting label {
+    color: #fcd34d;
 }
 
 .legend {

package/demo/shared/geometry-presets.js

@@ -86,8 +86,8 @@ export const GEOMETRY_PRESETS = [
         bezier: {
             fitted: {
                 p0: { x: 0.015, y: 0.48 },
-                p1: { x: 0.48, y: 1.08 },
-                p2: { x: 0.985, y: -0.02 }
+                p1: { x: 0.48, y: 0.48 },
+                p2: { x: 0.985, y: 0.48 }
             },
             curveSmooth: 0.1,
             rightTilt: 1,

package/demo/shared/params-panel.js

@@ -1,9 +1,12 @@
 import { PARAM_SCHEMA } from './constants.js';
 import { getByPath, paramFieldId } from './param-utils.js';
+import { parseControlPointPath } from './track-helpers.js';
 
 export function bindParamsPanel(paramsForm, {
     getParams,
     onParamChange,
+    onControlPointAdjustStart,
+    onControlPointAdjustEnd,
     schema = PARAM_SCHEMA,
     fadeSectionTitle = '动画',
     animationCheckboxes = [
@@ -48,6 +51,23 @@ export function bindParamsPanel(paramsForm, {
             output.textContent = String(num);
         });
 
+        const controlHint = parseControlPointPath(field.path);
+        if (controlHint) {
+            row.classList.add('param-row-cp');
+            row.dataset.controlPoint = controlHint.point;
+            row.dataset.controlAxis = controlHint.axis;
+
+            input.addEventListener('pointerdown', () => {
+                onControlPointAdjustStart?.(controlHint);
+                window.addEventListener('pointerup', () => {
+                    onControlPointAdjustEnd?.();
+                }, { once: true });
+            });
+            input.addEventListener('blur', () => {
+                onControlPointAdjustEnd?.();
+            });
+        }
+
         sections.get(field.section).appendChild(row);
     });
 

package/demo/shared/track-helpers.js

@@ -48,21 +48,107 @@ export function applyBgLayer(bgLayer, bgUrl = null) {
     bgLayer.style.backgroundSize = '100% 100%';
 }
 
-export function updateDebugTrack(trackLayer, layout, visible, BezierSliderClass) {
+const CONTROL_POINT_META = {
+    p0: { label: 'P0', color: '#38bdf8', influence: [0, 0.45], hint: '左端起点' },
+    p1: { label: 'P1', color: '#fb923c', influence: [0.15, 0.85], hint: '中间弧度' },
+    p2: { label: 'P2', color: '#c084fc', influence: [0.55, 1], hint: '右端终点' }
+};
+
+export function parseControlPointPath(path) {
+    const match = String(path).match(/^bezier\.fitted\.(p[012])\.([xy])$/);
+    if (!match) return null;
+    return { point: match[1], axis: match[2] };
+}
+
+function sampleCurveSegment(curve, tStart, tEnd, pointOnCurve, steps = 20) {
+    const parts = [];
+    for (let i = 0; i <= steps; i++) {
+        const t = tStart + (tEnd - tStart) * (i / steps);
+        const { x, y } = pointOnCurve(t, curve);
+        parts.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
+    }
+    return parts.join(' ');
+}
+
+function setSvgContent(svg, layout, BezierSliderClass, activeControl) {
+    const { bezier } = layout;
+    if (!bezier) return;
+
+    const pointOnCurve = BezierSliderClass.pointOnCurve;
+    const curvePath = BezierSliderClass.bezierPath(bezier);
+    const { p0, p1, p2 } = bezier;
+    const activeKey = activeControl?.point ?? null;
+    const activeMeta = activeKey ? CONTROL_POINT_META[activeKey] : null;
+
+    let influencePath = '';
+    if (activeMeta) {
+        const [t0, t1] = activeMeta.influence;
+        influencePath = `<path class="debug-influence" fill="none" stroke="${activeMeta.color}" stroke-width="5" stroke-linecap="round" opacity="0.55" d="${sampleCurveSegment(bezier, t0, t1, pointOnCurve)}"/>`;
+    }
+
+    let axisHint = '';
+    if (activeControl && activeMeta) {
+        const pt = bezier[activeControl.point];
+        const len = Math.min(56, Math.max(36, layout.width * 0.1));
+        const half = len / 2;
+        const color = activeMeta.color;
+        if (activeControl.axis === 'x') {
+            axisHint = `
+                <line class="debug-axis" x1="${pt.x - half}" y1="${pt.y}" x2="${pt.x + half}" y2="${pt.y}" stroke="${color}" stroke-width="2" marker-start="url(#debugArrow)" marker-end="url(#debugArrow)" opacity="0.95"/>
+                <text class="debug-axis-label" x="${pt.x + half + 6}" y="${pt.y + 4}" fill="${color}">X →</text>`;
+        } else {
+            axisHint = `
+                <line class="debug-axis" x1="${pt.x}" y1="${pt.y - half}" x2="${pt.x}" y2="${pt.y + half}" stroke="${color}" stroke-width="2" marker-start="url(#debugArrow)" marker-end="url(#debugArrow)" opacity="0.95"/>
+                <text class="debug-axis-label" x="${pt.x + 6}" y="${pt.y + half + 14}" fill="${color}">Y ↓</text>`;
+        }
+    }
+
+    const controlPoints = ['p0', 'p1', 'p2'].map((key) => {
+        const pt = bezier[key];
+        const meta = CONTROL_POINT_META[key];
+        const isActive = key === activeKey;
+        const r = isActive ? 7 : 5;
+        const opacity = isActive ? 1 : 0.55;
+        const stroke = isActive ? '#fff' : meta.color;
+        const fill = isActive ? meta.color : 'rgba(0,0,0,0.35)';
+        const pulse = isActive
+            ? `<circle cx="${pt.x}" cy="${pt.y}" r="14" fill="none" stroke="${meta.color}" stroke-width="2" opacity="0.45" class="debug-point-pulse"/>`
+            : '';
+        const hint = isActive
+            ? `<text class="debug-point-hint" x="${pt.x}" y="${pt.y - 16}" fill="${meta.color}" text-anchor="middle">${meta.hint} · 调${activeControl.axis.toUpperCase()}</text>`
+            : '';
+        return `${pulse}
+            <circle class="debug-point" data-point="${key}" cx="${pt.x}" cy="${pt.y}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="2" opacity="${opacity}"/>
+            <text class="debug-point-label" x="${pt.x}" y="${pt.y + 4}" fill="${isActive ? '#fff' : meta.color}" text-anchor="middle" font-size="10" font-weight="600">${meta.label}</text>
+            ${hint}`;
+    }).join('');
+
+    svg.innerHTML = `
+        <defs>
+            <marker id="debugArrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor"/>
+            </marker>
+        </defs>
+        ${influencePath}
+        <path class="debug-curve" fill="none" stroke="lime" stroke-width="2" stroke-dasharray="6 4" opacity="0.85" d="${curvePath}"/>
+        <line class="debug-polygon" x1="${p0.x}" y1="${p0.y}" x2="${p1.x}" y2="${p1.y}" stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3"/>
+        <line class="debug-polygon" x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3"/>
+        <g class="debug-axis-hints" color="${activeMeta?.color ?? '#fff'}">${axisHint}</g>
+        <g class="debug-control-points">${controlPoints}</g>`;
+}
+
+export function updateDebugTrack(trackLayer, layout, visible, BezierSliderClass, activeControl = null) {
     let svg = trackLayer.querySelector('.debug-track');
     if (!visible) {
         svg?.remove();
         return;
     }
     if (!svg) {
-        trackLayer.insertAdjacentHTML(
-            'afterbegin',
-            '<svg class="debug-track" preserveAspectRatio="none"><path fill="none" stroke="lime" stroke-width="2" stroke-dasharray="6 4" opacity="0.85"/></svg>'
-        );
+        trackLayer.insertAdjacentHTML('afterbegin', '<svg class="debug-track" preserveAspectRatio="none"></svg>');
         svg = trackLayer.querySelector('.debug-track');
     }
     svg.setAttribute('viewBox', getTrackViewBox(layout));
-    svg.querySelector('path').setAttribute('d', BezierSliderClass.bezierPath(layout.bezier));
+    setSvgContent(svg, layout, BezierSliderClass, activeControl);
 }
 
 export function readImageFile(file) {

package/dist/bezier-slider.mjs

@@ -32,10 +32,10 @@ var k = (c, a, o) => (q(c, typeof a != "symbol" ? a + "" : a, o), o);
       fitted: {
         p0: { x: 0.015, y: 0.48 },
         // 左端略低（接近原默认高度）
-        p1: { x: 0.48, y: 1.08 },
-        // 控制点下压，保留滑轨弧度
-        p2: { x: 0.985, y: -0.02 }
-        // 右端偏高
+        p1: { x: 0.48, y: 0.48 },
+        // 控制点 Y 直接参与弧度（不再被 rightTilt 覆盖）
+        p2: { x: 0.985, y: 0.48 }
+        // 右端 Y 为基准，rightEndOffset 在其上叠加
       },
       curveSmooth: 0.1,
       // 略平滑，弧线仍清晰
@@ -240,20 +240,17 @@ var k = (c, a, o) => (q(c, typeof a != "symbol" ? a + "" : a, o), o);
     };
   }
   function O(e, t, s) {
-    const i = e.p0.y, n = i - s, r = {
-      x: 0.45,
-      y: (i + n) / 2 + 0.05
-    };
-    return {
-      p0: e.p0,
-      p1: {
-        x: e.p1.x + (r.x - e.p1.x) * t,
-        y: e.p1.y + (r.y - e.p1.y) * t
-      },
+    return t ? {
+      p0: { ...e.p0 },
+      p1: { ...e.p1 },
       p2: {
         x: e.p2.x,
-        y: e.p2.y + (n - e.p2.y) * t
+        y: e.p2.y - s * t
       }
+    } : {
+      p0: { ...e.p0 },
+      p1: { ...e.p1 },
+      p2: { ...e.p2 }
     };
   }
   function D(e, { t, degrees: s }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bezier-slider",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "二次贝塞尔弧形图标滑块组件，支持原生 JavaScript、Vue 3 和 React",
   "main": "dist/bezier-slider.mjs",
   "module": "dist/bezier-slider.mjs",

package/src/bezier-slider.native.js

@@ -43,8 +43,8 @@
             // 基础二次贝塞尔三控制点（归一化坐标 0~1，y 越大越低）
             fitted: {
                 p0: { x: 0.015, y: 0.48 },   // 左端略低（接近原默认高度）
-                p1: { x: 0.48, y: 1.08 },    // 控制点下压，保留滑轨弧度
-                p2: { x: 0.985, y: -0.02 }   // 右端偏高
+                p1: { x: 0.48, y: 0.48 },    // 控制点 Y 直接参与弧度（不再被 rightTilt 覆盖）
+                p2: { x: 0.985, y: 0.48 }    // 右端 Y 为基准，rightEndOffset 在其上叠加
             },
             curveSmooth: 0.1,             // 略平滑，弧线仍清晰
             rightTilt: 1,
@@ -373,25 +373,24 @@
     }
 
     /**
-     * 右端高度微调：控制右端相对左端的上扬幅度
-     * 通过调整 P1、P2 的 y 实现，保持二次贝塞尔类型不变
+     * 右端高度微调：仅在 fitted 基础上叠加 P2 的 Y 偏移
+     * 不修改 P1，以便控制点 P1 的 X/Y 滑块直接生效
      */
     function easeRightTilt(bezier, tilt, rightEndOffset) {
-        const leftY = bezier.p0.y;
-        const targetP2Y = leftY - rightEndOffset;
-        const targetP1 = {
-            x: 0.45,
-            y: (leftY + targetP2Y) / 2 + 0.05
-        };
+        if (!tilt) {
+            return {
+                p0: { ...bezier.p0 },
+                p1: { ...bezier.p1 },
+                p2: { ...bezier.p2 }
+            };
+        }
+
         return {
-            p0: bezier.p0,
-            p1: {
-                x: bezier.p1.x + (targetP1.x - bezier.p1.x) * tilt,
-                y: bezier.p1.y + (targetP1.y - bezier.p1.y) * tilt
-            },
+            p0: { ...bezier.p0 },
+            p1: { ...bezier.p1 },
             p2: {
                 x: bezier.p2.x,
-                y: bezier.p2.y + (targetP2Y - bezier.p2.y) * tilt
+                y: bezier.p2.y - rightEndOffset * tilt
             }
         };
     }