2013-08-18 116 views
0

布料仿真我發現布料模擬的來源。這裏是 JSFIDDLE.NET如何在HTML5帆布+ jquery

<canvas id="c" height="500" width="500"></canvas> 

JS

$(document).ready(function() { 
      xyz(); 
     }); 
     function xyz() 
     { 
      a = "d#ocumt;c#.getElemtById('c'Ub=c.getContext('2d'Uf=10;c.wid=g=c.height=j=500;k=[Ml=[Mq=hH;r=o=1;D_5V<fV++,y_8Qz=[MDiH,_5J<fJ++,x_8Qz]={x:x,y:y:1,k:x,j:y}h>0Qpush([h,h])}(i>0?push([h,h]):0)@k[0][0]S=k[0][9]SH;nAclearRect(0,0,g,jUKffp=z]pwi(pQnx*1~-k*~;ny*1~-j*~+(_0125*rUk=x;j=y;nx;[email protected]@K2lga=lMs01t23dtW-sW`tZ-sZ`e#x+dy`i=(de-_064)/((de+_064)*(sS+tS))ssW+#i;sZ+#i}i&ttWNi;[email protected]}Olga=lMbeginPa(Us01t23!To(sW*g,sZ*jUlineTo(tW*g,tZ*jUstro()@;setInterval(n,35UFdownAw=f;Kffp=zMdxLX/g-pW`yLY/j-pZ;nw#x+dynw<[email protected]}F!AqW=q.kLX/gZ=q.jLY/jSH};FupAF!=nullS=o};}`.onydownAi&e.yCode==71Qr=(r=H)?1:0}oH}`.onyupAo=1}"; 
      for (b in c = "VGO;qkeyNxN]MJG-1l.J&x=+=y=en!moveS!HQb.,i[ithKDhHV<]]K=kK~.99`;[email protected]}}&f(#=d_.0zk[h]Z.yW.xV;hU);S.iQ){ODiHJ<N*dM];L=e.pageK[a[J;iH=0G++){Fd.onmouseDfor(A=function(e){".split("")) 
       a = a.replace(RegExp(c[b][0], "g"), c[b].slice(1)); 
      eval(a) 
     } 

但代碼看起來陌生的我。我想用我的圖像填充矩形如何做到這一點? 如何在這類布料模擬中填充圖像或任何教程。給我一些方向

+1

下面是[實際代碼](http://jsfiddle.net/cUaE6/1/)。 – FakeRainBrigand

+0

和稍微[更好的版本](http://jsfiddle.net/cUaE6/2/)重構一些變量名稱。 – FakeRainBrigand

+0

@FakeRainBrigand感謝您的鏈接。稍微好一點的版本不提供輸出。 –

回答

1

你有一個物理布料模擬與一些控件,只繪製佈網的邊緣。你需要一個三角形的抽屜,所以你可以將圖像的座標分配到這個網格中。你可以使用WebGL來完成這項工作,或者在2D環境中自己編寫三角形抽屜。看看這個demo我幾年前發現的在2D上下文中展示3d布料模擬。此外,請檢查繪製三角形的代碼(它是here),以便您可以自己使用它。祝你好運!

+0

謝謝。看起來很有希望...... –