摘要最近做了一个H5的项目。我要了一个带有骷髅的diy项目。一开始以为一定是用白鹭骨架之类的软件写的。后来找了很多资料，也尝试了很多东西。各种事情都不奏效。我真笨。待会儿再看看有别人的h5，也有这样的功能。看了他的代码，我觉得他们也是自己写的，所以我决定自己写。使用PIXIjs，废话不多说，开始吧。让我们从手的关节开始。手可以看成三个点，如图连接这三个点，就是一个三角形，那么我们可以利用三角形的数学知识，现在我们有三个长度，其中arm1（下图y0）和arm2（下面用y1）是知道定长的，而第1行（下面用cY）对于1点到3点的距离不是定长的，好了，既然有了3条边，我们就需要结合三个边成三角形，也就是计算三个角，根据余弦定律看图。点1角度=Math.acos((y0*y0+cY*cY-y1*y1)/(2*y0*cY));点3角度=-Math.acos((y1*y1+cY*cY-y0*y0)/(2*y1*cY));两个角和边的组合就是一个三角形，知识点就到这里了。技巧上面我们说了骨骼是一个三角形，那么怎么画就比较容易了，每个关节都存放在一个容器中。var$container=newPIXI.Container();在varbranch=newPIXI.Sprite(that.getImgData(that.sex+index))中画两条手臂；设置位置，为了连接手臂，那么手臂的最大值：y0+y1表示用户直接在cY上线，那用户左右移动怎么办。我们可以先记录touchstart时的当前cY角和touchmove时的cY角，然后我们可以整体旋转容器，然后计算cY的长度，得到手的弯曲角度，就变成了一个简单的骨骼交互。4个肢体都是基于相同的原理，每个肢体都可以包裹在一个容器中。这很容易控制。
