canvas簡單骨骼 筆記

摘要

最近作了個H5項目。要求一個有骨骼的diy項目，一開始覺得必定要用白鷺之類的那個骨骼之類的軟件來寫才能夠，
後來找了很資料，試了不少方面，各類不行，本人愚笨，後來看一下有別人的一個h5，裏面也有這樣的功能，看了他的代碼，我看他們好像也是本身寫的，我也決定本身寫。
用PIXIjs
好了，廢話很少說，下面開始吧。

開始

咱們從手的關節來講吧。
手能夠當作三個點如圖

把這三個點鏈接起來，就一個三角形，三角形那咱們就能夠用三角形的數學知識了，如今咱們有的是三個的長度
其中臂1 （下面用y0）和臂2(下面用y1)是知道固定長度,而線1（下面用cY）就點1到點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 = new PIXI.Container();

把兩個手臂畫進來

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

定好位，爲了手臂鏈接起來，那麼手臂最大值:y0+y1
上面說的是用戶在cY裏直接上線，那若是用戶左右移動怎麼辦呢。

咱們能夠先記錄touchstart時的當前cY角度，和touchmove的cY角度，那麼咱們能夠把容器總體轉動，再來算cY的長度，就能夠獲得手的彎曲角度，這樣就成了簡單的骨骼互動了。
4肢是都是同個原理，每一個肢體均可以用一個容器包起來。這樣方便控制.