0

我找到了布料模拟的来源。这是 JSFIDDLE.NET

<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;ny@@K2lga=lMs01t23dtW-sW`tZ-sZ`e#x+dy`i=(de-_064)/((de+_064)*(sS+tS))ssW+#i;sZ+#i}i&ttWNi;tZNi@}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<wQw=nw=p@}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`;d@}}&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)
        }

但代码对我来说看起来很陌生。我想用我的图像填充矩形怎么做？如何用图像或任何有关此类布料模拟的教程填充这些框。给我一些方向

4

1 回答 1

1

您所拥有的是带有一些控件的物理布料模拟，仅绘制布料网格的边缘。您需要一个三角形抽屉，因此您可以将图像的坐标分配到此网格中。您可以使用 WebGL 来完成这项工作，或者自己在 2d 上下文中编写三角形抽屉代码。看看我几年前发现的这个演示，它演示了 2d 上下文中的 3d 布料模拟。另外，检查一个绘制三角形的代码（它在这里），所以你可以自己使用它。祝你好运！

于 2013-08-18T15:24:03.607 回答