Package Exports

mskalign-canvas
mskalign-canvas/lib/mskalign-canvas.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mskalign-canvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

面向对象脊椎曲线系统库

基于 NURBS 曲线的脊椎模拟系统，采用面向对象设计，便于在其他项目中集成和使用。

特性

🎯 面向对象设计：清晰的类结构，易于扩展和维护
🔧 灵活配置：支持多种参数配置，适应不同需求
🖱️ 交互式操作：支持鼠标拖拽、悬停等交互
📊 状态管理：支持导出/导入状态，便于数据持久化
🎨 可视化效果：支持网格、连接线、发光效果等视觉元素
🔄 实时物理约束：模拟真实脊椎的物理特性

快速开始

1. 引入依赖

<!-- 引入 verb-nurbs 库 -->
<script src="https://unpkg.com/verb-nurbs"></script>
<!-- 引入脊椎系统库 -->
<script src="spine-system.js"></script>

2. 创建 HTML 结构

<canvas id="spineCanvas" width="400" height="600"></canvas>

3. 初始化脊椎系统

// 脊椎点数据：[x, y] 坐标数组
const spineData = [
  [200, 50],
  [201, 70],
  [202, 90],
  [203, 110],
  [204, 130],
  [205, 150],
  [206, 170],
  [207, 190],
  [208, 210],
  [209, 230],
];

// 获取canvas元素
const canvas = document.getElementById("spineCanvas");

// 创建脊椎系统实例
const spineSystem = new SpineSystem(canvas, spineData, {
  influence: 1.5, // 影响强度
  curveDegree: 2, // 曲线次数
  smoothness: 0.3, // 平滑度
  influenceRange: 4, // 影响范围
  showGrid: true, // 显示网格
});

// 渲染系统
spineSystem.render();

核心类介绍

SpineSystem - 主系统类

主要的脊椎系统类，协调所有组件的工作。

构造函数

new SpineSystem(canvas, initialData, options);

canvas: HTML Canvas 元素
initialData: 初始脊椎点数据，格式为 [[x1, y1], [x2, y2], ...]
options: 配置选项对象

配置选项

const options = {
  influence: 1.5, // 影响强度 (0.1 - 2.5)
  curveDegree: 2, // 曲线次数 (2 - 5)
  smoothness: 0.3, // 平滑度 (0.1 - 2.0)
  influenceRange: 4, // 影响范围 (3 - 12)
  showGrid: true, // 显示网格
};

主要方法

// 更新配置
spineSystem.updateConfig(newConfig);

// 重置到初始状态
spineSystem.reset();

// 获取当前点位置
const points = spineSystem.getPoints();

// 获取原始点位置
const originalPoints = spineSystem.getOriginalPoints();

// 导出当前状态
const state = spineSystem.exportState();

// 导入状态
spineSystem.importState(state);

// 手动渲染
spineSystem.render();

// 销毁实例
spineSystem.destroy();

SpinePoint - 脊椎点类

表示脊椎上的一个点。

属性

point.x, point.y; // 当前坐标
point.originalX, point.originalY; // 原始坐标
point.index; // 点的索引
point.isEndPoint; // 是否为端点
point.isHovered; // 是否被悬停
point.isDragged; // 是否被拖拽
point.influenceState; // 影响状态：'normal' | 'influenced' | 'lightlyFollowing'

方法

// 重置到原始位置
point.reset();

// 计算到指定坐标的距离
const distance = point.distanceTo(x, y);

// 获取点的颜色
const color = point.getColor();

// 获取点的半径
const radius = point.getRadius();

SpinePhysics - 物理系统类

处理脊椎的物理约束和影响计算。

方法

// 应用物理约束
physics.applyConstraints(points, smoothness);

// 应用影响效果
physics.applyInfluence(points, dragIndex, dragOffset, config);

// 计算三点间的角度
const angle = physics.calculateAngle(p1, p2, p3);

SpineRenderer - 渲染器类

负责所有的绘制工作。

方法

// 清空画布
renderer.clear();

// 绘制网格
renderer.drawGrid();

// 绘制NURBS曲线
renderer.drawNurbsCurve(curve, smoothness);

// 绘制连接线
renderer.drawConnectionLines(points);

// 绘制脊椎点
renderer.drawPoints(points);

// 绘制悬停信息
renderer.drawHoverInfo(point, mouseX, mouseY);

SpineInteraction - 交互处理类

处理鼠标交互逻辑。

方法

// 获取鼠标位置
const pos = interaction.getMousePosition();

// 获取悬停的点
const hoveredPoint = interaction.getHoveredPoint();

使用示例

基本使用

const spineSystem = new SpineSystem(canvas, spineData);
spineSystem.render();

动态更新配置

// 监听滑块变化
document.getElementById("influenceSlider").addEventListener("input", (e) => {
  spineSystem.updateConfig({ influence: parseFloat(e.target.value) });
});

状态管理

// 保存状态
const currentState = spineSystem.exportState();
localStorage.setItem("spineState", JSON.stringify(currentState));

// 恢复状态
const savedState = JSON.parse(localStorage.getItem("spineState"));
spineSystem.importState(savedState);

多实例使用

// 创建多个独立的脊椎系统
const spineSystem1 = new SpineSystem(canvas1, spineData1, config1);
const spineSystem2 = new SpineSystem(canvas2, spineData2, config2);

// 各自独立运行
spineSystem1.render();
spineSystem2.render();

高级用法

自定义物理约束

// 继承并扩展物理系统
class CustomSpinePhysics extends SpinePhysics {
  applyConstraints(points, smoothness) {
    // 先应用基础约束
    super.applyConstraints(points, smoothness);

    // 添加自定义约束
    this.applyCustomConstraints(points);
  }

  applyCustomConstraints(points) {
    // 自定义约束逻辑
  }
}

// 使用自定义物理系统
const customSpineSystem = new SpineSystem(canvas, spineData);
customSpineSystem.physics = new CustomSpinePhysics();

自定义渲染效果

// 继承并扩展渲染器
class CustomSpineRenderer extends SpineRenderer {
  drawPoints(points) {
    // 先绘制基础点
    super.drawPoints(points);

    // 添加自定义效果
    this.drawCustomEffects(points);
  }

  drawCustomEffects(points) {
    // 自定义绘制逻辑
  }
}

// 使用自定义渲染器
const customSpineSystem = new SpineSystem(canvas, spineData);
customSpineSystem.renderer = new CustomSpineRenderer(canvas);

事件监听

// 可以通过覆盖交互处理方法来添加自定义事件
class CustomSpineInteraction extends SpineInteraction {
  handleMouseDown(e) {
    // 调用原始处理
    super.handleMouseDown(e);

    // 添加自定义逻辑
    console.log("点击了脊椎点");
  }
}

性能优化建议

避免频繁重绘：只在必要时调用 render() 方法
合理设置参数：过高的平滑度会影响性能
控制点数量：建议脊椎点数量在 10-20 个之间
使用 requestAnimationFrame：对于动画效果，使用 RAF 优化
及时销毁：页面卸载时调用 destroy() 方法

浏览器兼容性

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

依赖库

verb-nurbs: NURBS 曲线计算库

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request 来改进这个库。

更新日志

v1.0.0

初始版本发布
支持基本的脊椎曲线模拟
面向对象设计
完整的 API 文档