How does interact js resize the Js plug-in
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.
