in tera ct.js 介绍
in tera ct.js是 一个 随意改变形状 插件 ,它非常强大的，灵活拖放，改变大小， 支持 现代浏览器的多点触摸手势，基于SVG的运用，能运行在 包括 在IE8+的浏览器。 ? 功能 包括 ：
惯性和对齐
多点触控，同步互动
跨浏览器和设备， 支持 Chrome，Firefox和Opera以及 Internet Explorer 9+ 的 桌面和移动 版本
与SVG元素的交互
是独立的，可定制
不 修改 DOM除了更改光标（但你可以禁用它）?
安装
npm install in tera ctjs
例子
var pixelSize = 16;
in tera ct('.rainbow-pixel-canvas')
.origin('self')
.draggable({
modifiers: [
in tera ct.modifiers.snap({
// snap to the corners of a grid
targets: [
in tera ct.snappers.grid({ x: pixelSize,y: pixelSize }),
],
})
],
})
// draw colored squares on move
.on('dragmove',function (event) {
var context = event.target.getContext('2d'),
// cal cula te 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;
});
}
// in tera ct.js can also add DOM event listeners
in tera ct(document).on('DOMContentLoaded',resizeCanvases);
in tera ct(window).on('resize',resizeCanvases);
网站地址 : http://interactjs.io/
GitHub: https://github.com/taye/interact.js
网站描述: 用于拖放，调整大小Js 插件
interact.js官方网站
官方网站： http://interactjs.io/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。