knob js实现

使用 Knob.js 实现旋钮控件

Knob.js 是一个轻量级的 JavaScript 库，用于创建可交互的旋钮控件。以下是实现方法：

安装 Knob.js 通过 npm 安装：

npm install knob-js

或直接通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/knob-js@1.2.0/dist/knob.min.js"></script>

基础用法 创建一个简单的旋钮：

<div id="myKnob"></div>
<script>
  const knob = new Knob({
    element: document.getElementById('myKnob'),
    value: 50,
    min: 0,
    max: 100,
    width: 200,
    height: 200,
    onChange: (value) => {
      console.log('当前值:', value);
    }
  });
</script>

自定义样式 可以通过 CSS 自定义旋钮外观：

.knob-container {
  background-color: #f0f0f0;
  border-radius: 50%;
}
.knob-value {
  font-family: Arial, sans-serif;
  font-size: 24px;
  fill: #333;
}

高级配置 支持更多自定义选项：

const knob = new Knob({
  element: document.getElementById('advancedKnob'),
  value: 25,
  min: -50,
  max: 50,
  step: 5,
  angleOffset: 225,
  angleRange: 270,
  color: {
    base: '#ddd',
    indicator: '#4CAF50',
    value: '#333',
    label: '#666'
  },
  format: (value) => `${value}%`
});

事件处理 支持多种交互事件：

knob.on('change', (value) => {
  // 值改变时触发
});

knob.on('dragStart', () => {
  // 开始拖动时触发
});

knob.on('dragEnd', () => {
  // 拖动结束时触发
});

响应式更新 动态更新旋钮值：

// 设置新值
knob.value = 75;

// 获取当前值
const currentValue = knob.value;

注意事项 确保在 DOM 加载完成后初始化旋钮 旋钮容器需要有明确的宽度和高度 移动端支持触摸事件，无需额外配置 Knob.js 文档提供了完整的 API 参考和示例，可根据需要进一步定制功能。