Shulou(Shulou.com)06/03 Report--

Interact js how to resize the Js plug-in, for this question, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Interact.js is a random shape change plug-in, it is very powerful, flexible drag and drop, resize, support modern browser multi-touch gestures, SVG-based applications, can be run in browsers included in IE8+.

Interact.js features include:

Inertia and alignment

Multi-touch, synchronous interaction

Support for Chrome,Firefox and Opera and desktop and mobile versions of InternetExplorer9+ across browsers and devices

Interaction with SVG elements

Is independent and customizable

Do not modify DOM except change the cursor (but you can disable it)

Interact.js installation

Npminstallinteractjs

Exampl

VarpixelSize=16

Interact ('.rainbow-pixel-canvas')

Origin ('self')

.draggable ({

Modifiers: [

Interact.modifiers.snap ({

/ / snaptothecornersofagrid

Targets: [

Interact.snappers.grid ({XRU PixelSizeMagnesia 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) +'%)'

This is the answer to the question about how to resize the Js plug-in for interact js. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.