Interact.js 技术文档

宋燕荷Fiery

于 2024-10-18 11:03:28 发布

阅读量1.1k

点赞数 26

本文链接：https://blog.csdn.net/gitblog_01277/article/details/143039992

版权

Interact.js 技术文档

interact.js JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+) 项目地址: https://gitcode.com/gh_mirrors/in/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框架，可以通过以下步骤添加：

使用Yarn添加依赖：
```
yarn add interactjs
```
在需要的地方通过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元素创建动态交互体验。