Question

我找到了布料模拟的来源。这是 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)
        }

但代码对我来说很陌生。我想用我的图像填充矩形怎么做？如何用这种类型的布料模拟填充图像或任何教程。给我一些指导

Answer 1

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

如何在html5 canvas + jquery中进行布料模拟

1 个答案: