摘要：摘要最近做了个项目。我们可以先记录时的当前角度，和的角度，那么我们可以把容器整体转动，再来算的长度，就可以得到手的弯曲角度，这样就成了简单的骨骼互动了。
摘要
最近做了个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肢是都是同个原理，每个肢体都可以用一个容器包起来。这样方便控制.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94930.html
阅读 608·2023-04-25 15:49
阅读 3060·2021-09-22 15:13
阅读 1068·2021-09-07 10:13
阅读 3426·2019-08-29 18:34
阅读 2529·2019-08-29 15:22
阅读 468·2019-08-27 10:52
阅读 631·2019-08-26 18:27
阅读 2949·2019-08-26 13:44
