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