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

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

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

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

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

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

   var $container = new PIXI.Container();

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

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

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

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