【亲测免费】 Interact.js 技术文档

Interact.js 是一款强大的JavaScript库，旨在实现拖放、缩放以及多点触控手势功能，兼容现代浏览器（包括IE9及以上版本）。其特性涵盖了惯性滑动、吸附效果、支持多指触控的同时交互，且适用于桌面和移动设备上的Chrome、Firefox、Opera等浏览器，同时也包括对SVG元素的支持。它作为一个独立且可定制的库，不会擅自改动DOM结构，除非是为了改变光标样式。

安装指南

通过npm安装

执行以下命令将Interact.js添加到您的项目中：

npm install interactjs

使用CDN服务

您可以选择两种流行的CDN之一来快速引入Interact.js。

• jsDelivr: 在HTML文件中加入此行代码

  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  

• unpkg: 类似的，也可以使用unpkg的链接

  <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
  

Rails 5.1 及以上版本

如果您在使用Rails框架，可以通过以下步骤添加：

1. 使用Yarn添加依赖：

   yarn add interactjs
   

2. 在需要的地方通过require引入：

   //= require interactjs/interact
   

对于Scala和Play 2框架（利用Webjars）

如果您正在使用基于Sbt的项目，如Play框架，可以这样配置：

libraryDependencies ++= Seq("org.webjars.npm" % "interactjs" % "版本号")

TypeScript 用户

对于使用TypeScript的项目，可以直接通过npm获取类型定义：

npm install --save-dev @interactjs/types

使用说明

以一个互动的像素画布为例，展示如何使用Interact.js：

// 获取像素尺寸
const pixelSize = 16;

// 设置元素为可拖拽，并应用网格吸附效果
interact('.rainbow-pixel-canvas')
  .origin('self') // 拖拽原点设为自身中心
  .draggable({ // 开启拖拽
    modifiers: [
      interact.modifiers.snap({ // 吸附至网格
        targets: [interact.snappers.grid({ x: pixelSize, y: pixelSize })],
      }),
    ],
    listeners: { // 拖动时绘制彩色方块
      move: (event) => {
        const context = event.target.getContext('2d');
        let dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI; // 计算拖动方向角度
        context.fillStyle = 'hsl(' + dragAngle + ', 86%, ' + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';
        context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2, pixelSize, pixelSize);
      },
    },
  })
  .on('doubletap', function (event) { // 双击清空画布
    const context = event.target.getContext('2d');
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  });

// 根据窗口大小调整画布大小
function resizeCanvases() {
  document.querySelectorAll('.rainbow-pixel-canvas').forEach((canvas) => {
    canvas.width = document.body.clientWidth;
    canvas.height = window.innerHeight * 0.7;
  });
}

interact(document).on('DOMContentLoaded', resizeCanvases); // 页面加载完成时调用
interact(window).on('resize', resizeCanvases); // 窗口大小变化时调用

该示例展示了如何结合Interact.js与SVG或HTML Canvas元素创建动态交互体验。

API使用文档

详细的API文档位于官网的文档页面，提供了所有可用的方法、属性和事件的详细说明，以及如何自定义行为和响应不同的交互事件。

项目安装方式回顾

总结来说，您可以通过多种方式集成Interact.js到您的项目中，无论是通过包管理器npm，还是直接利用CDN服务。确保参考其官方文档以深入了解每一个特性和最佳实践，最大化发挥这个库的功能。记住，对于TypeScript项目，别忘了添加对应的类型定义以获得更好的编码体验。