interact js怎么调整大小Js插件

发布时间:2021-10-13 14:52:04 作者:柒染
来源:亿速云 阅读:132

interact js怎么调整大小Js插件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

  interact.js是一个随意改变形状插件,它非常强大的,灵活拖放,改变大小,支持现代浏览器的多点触摸手势,基于SVG的运用,能运行在包括在IE8+的浏览器。

  interact.js功能包括:

  惯性和对齐

  多点触控,同步互动

  跨浏览器和设备,支持Chrome,Firefox和Opera以及InternetExplorer9+的桌面和移动版本

  与SVG元素的交互

  是独立的,可定制

  不修改DOM除了更改光标(但你可以禁用它)

  interact.js安装

  npminstallinteractjs

  例子

  varpixelSize=16;

  interact('.rainbow-pixel-canvas')

  .origin('self')

  .draggable({

  modifiers:[

  interact.modifiers.snap({

  //snaptothecornersofagrid

  targets:[

  interact.snappers.grid({x:pixelSize,y:pixelSize}),

  ],

  })

  ],

  })

  //drawcoloredsquaresonmove

  .on('dragmove',function(event){

  varcontext=event.target.getContext('2d'),

  //calculatetheangleofthedragdirection

  dragAngle=180*Math.atan2(event.dx,event.dy)/Math.PI;

  //setcolorbasedondragangleandspeed

  context.fillStyle='hsl('+dragAngle+',86%,'

  +(30+Math.min(event.speed/1000,1)*50)+'%)';

关于interact js怎么调整大小Js插件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

推荐阅读:
  1. 通过js提示文本框仅能输入数字或者数字+字母
  2. FineReport中JS怎么自定义按钮导出

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:写批处理必备的命令参数使用技巧有哪些

下一篇:mt4的优势有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》