interact.js 介绍
interact.js是一个随意改变形状插件,它非常强大的,灵活拖放,改变大小,支持现代浏览器的多点触摸手势,基于SVG的运用,能运行在包括在IE8+的浏览器。 功能包括:
惯性和对齐
多点触控,同步互动
跨浏览器和设备,支持Chrome,Firefox和Opera以及Internet Explorer 9+的桌面和移动版本
与SVG元素的交互
是独立的,可定制
不修改DOM除了更改光标(但你可以禁用它)
安装
npm install interactjs
例子
var pixelSize = 16;
interact('.rainbow-pixel-canvas')
.origin('self')
.draggable({
modifiers: [
interact.modifiers.snap({
// snap to the corners of a grid
targets: [
interact.snappers.grid({ x: pixelSize,y: pixelSize }),
],
})
],
})
// draw colored squares on move
.on('dragmove',function (event) {
var context = event.target.getContext('2d'),
// calculate the angle of the drag direction
dragAngle = 180 * Math.atan2(event.dx,event.dy) / Math.PI;
// set color based on drag angle and speed
context.fillStyle = 'hsl(' + dragAngle + ',86%,'
+ (30 + Math.min(event.speed / 1000,1) * 50) + '%)';
// draw squares
context.fillRect(event.pageX - pixelSize / 2,event.pageY - pixelSize / 2,
pixelSize,pixelSize);
})
// clear the canvas on doubletap
.on('doubletap',function (event) {
var context = event.target.getContext('2d');
context.clearRect(0,context.canvas.width,context.canvas.height);
});
function resizeCanvases () {
[].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'),function (canvas) {
canvas.width = document.body.clientWidth;
canvas.height = window.innerHeight * 0.7;
});
}
// interact.js can also add DOM event listeners
interact(document).on('DOMContentLoaded',resizeCanvases);
interact(window).on('resize',resizeCanvases);
GitHub:https://github.com/taye/interact.js
网站描述:用于拖放,调整大小Js插件
interact.js
小编说
以上是编程之家为你收集整理的interact.js全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。