canvas简单骨骼 笔记

news/2024/6/16 7:46:39

摘要

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


http://www.niftyadmin.cn/n/4616833.html

相关文章

mysql 按小时分层_MySQL逻辑分层介绍

上一篇文章主要介绍了MySQL在Ubuntu18.04系统上的安装,以及安装过程中可能会遇到的一些问题的解决方案。在这篇文章里,开始介绍MySQL数据库的逻辑分层。通过本文的介绍,可以大致了解到MySQL的语句从客户端发出请求后,在服务器经历…

程序新人的一点感悟

1. 做好用户需求分析(User Requirement Analysis),一定要清楚用户需求,明确所要实现的功能,避免出现前后需求不一致、内容失实、遗漏、含糊不清和描述不一致等现象的发生。 2.实现阶段,要实现某一功能模块&…

ruby1.93 mysql.so_RUBY 安装 MYSQL

1.首先安装好MySql 最新的应该是5.02.下载ruby连接MySql 的so文件 在http://www.vandomburg.net/pages/mysql-ruby-windows-2.7.1.zip3.把mysql.so 放到ruby 的lib\ruby\site_ruby\1.8\i386-msvcrt下.4.把libmysql.dll (在MySQL的安装目录bin下)拷贝到ruby 的bin 下.又或1. 首…

做一个有business sense的技术人

有网友问我,为什么在我的blog上找不到我的简介,我想了想,没有简介的原因主要有以下两条:1,我也还不清楚自己的定位。按照目前我所从事的工作,显然应该算是一个technician,但是,年过三…

获取指定的内容列表-MXCMS ClassList标签

功能说明 获取指定的内容列表 ,可分页 适用范围 列表模板 基本语法 [NT:Loop,NT:SiteID0,NT:LabelTypeClassList,NT:ListTypeNews,NT:isSubtrue,NT:SubNewstrue,NT:Cols4, NT:Descdesc,NT:DescTypeid,NT:isDivfalse,NT:bfStr0|5|CSS,NT:isPictrue,NT:TitleNumer30,N…

Entity Framework 更新数据库

Entity Framework 更新数据库更新单个数据源更新多个数据源自动更新数据源更新单个数据源 在程序包管理器控制台中执行以下指令: // 启用合并 PM> Enable-Migrations -EnableAutomaticMigrations// 添加脚手架,当数据库服务为 Oracle 时&#xff0c…

5.7.20mysql修改密码_Mysql 5.7.20 无法修改密码解决办法

重装系统下载了Mysql 5.7.20版本 配置启动完成发现一直无法修改密码。首先使用 update user set passwordpassword(123456) where userroot; 命令修改,报错如下图:然后改用 update mysql.user set authentication_stringpassword(123) where userroo…

总结 xib

总结 其实,你完全不需要做一个 “艰难的决定”,你可以像 QQ 和微信那样,根据具体情况来选择性的使用 xib 和 storyboard。这里有我的一些建议: 对于复杂的、动态生成的界面,建议使用手工编写界面。对于需要统一风格的按…