1.0.0 • Published 4 years ago
polygon-cloth v1.0.0
polygon cloth
put image or dom on canvas and interact with user like cloth
Install
Usage
dom
const Cloth= require(polygon-cloth);
let canvas = document.getElementById('canvas');
let dom = document.getElementById('domid');
new Cloth({
canvas:canv,
gravity:{x:0,y:500},
start:{x:0,y:0},
numcol:54,
numrow:23,
render_times:2,
tear_distance:300,
space:25,
renderType:2,
pand:{
x:1.02,
y:1.02
},
mouse_influence:50,
filltype:"glass",
doGrain:true
})
.init()
.bindEvent()
.renderGrain(dom)
.then(()=>{
requestAnimationFrame(anim);
});
function anim(){
cl.update();
// if((delaycount = ++delaycount%9) ==0)
cl.draw();
requestAnimationFrame(anim);
}
img
let image = new Image();
image.onload = function(){
new Cloth({
...
}).init()
.bindEvent()
.renderGrain(image)
.then(()=>{
//anim
})
}
image.src = 'image_src';
Options
- canvas = canvas element,
- ctx = ctx //ctx or canvas,not nessary support both
- numrow = how many cell-rows(cell number in y-axis),
- numcol = how many cell-cols(cell number in x-axis),
- space = the size of one cell,
- start ={ x:x, y:y, }//start
- gravity = {x:0,y:1200}重力加速度,
- tear_distance = 撕裂距离,
- mouse_influence = 光标影响范围,
- mouse_cut = 剪切影响范围,
- render_times = 每次更新前物理作用渲染次数,
- img = img src ,
- doGrain = false//是否渲染纹理,
- renderType=clarity 1|pattern 0//你试试
License
MIT
1.0.0
4 years ago