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肢是都是同个原理，每个肢体都可以用一个容器包起来。这样方便控制.