摘要：摘要最近做了個項(xiàng)目。我們可以先記錄時的當(dāng)前角度，和的角度，那么我們可以把容器整體轉(zhuǎn)動，再來算的長度，就可以得到手的彎曲角度，這樣就成了簡單的骨骼互動了。

最近做了個H5項(xiàng)目。要求一個有骨骼的diy項(xiàng)目，一開始以為一定要用白鷺之類的那個骨骼之類的軟件來寫才可以，
后來找了很資料，試了很多方面，各種不行，本人愚笨，后來看一下有別人的一個h5，里面也有這樣的功能，看了他的代碼，我看他們好像也是自己寫的，我也決定自己寫。
用PIXIjs
好了，廢話不多說，下面開始吧。

我們從手的關(guān)節(jié)來說吧。
手可以看成三個點(diǎn)如圖

把這三個點(diǎn)連接起來，就一個三角形，三角形那我們就可以用三角形的數(shù)學(xué)知識了，現(xiàn)在我們有的是三個的長度
其中臂1 （下面用y0）和臂2(下面用y1)是知道固定長度,而線1（下面用cY）就點(diǎn)1到點(diǎn)3的距離不固定長度，好了，現(xiàn)在三邊都有了要把三邊合成一個三角形，就是要三個角算出來，根據(jù)余弦定理

看圖可以得出

點(diǎn)1角=  Math.acos((y0 * y0 + cY * cY - y1 * y1) / (2 * y0 * cY));
點(diǎn)3角= -Math.acos((y1 * y1 + cY * cY - y0 * y0) / (2 * y1 * cY));

兩個角加邊合起來就是三角形了，知識點(diǎn)到這了。

上面我們說骨骼的就是一個三角形，那么要怎么畫才比較容易呢，
每一個關(guān)節(jié)都用一個容器來存起來。

   var $container = new PIXI.Container();

把兩個手臂畫進(jìn)來

   var branch = new PIXI.Sprite(that.getImgData(that.sex + index));

定好位，為了手臂連接起來，那么手臂最大值:y0+y1
上面說的是用戶在cY里直接上線，那如果用戶左右移動怎么辦呢。

我們可以先記錄touchstart時的當(dāng)前cY角度，和touchmove的cY角度，那么我們可以把容器整體轉(zhuǎn)動，再來算cY的長度，就可以得到手的彎曲角度，這樣就成了簡單的骨骼互動了。
4肢是都是同個原理，每個肢體都可以用一個容器包起來。這樣方便控制.