整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手指和手掌骨折后的康复方案

骨和掌骨骨折后,应对稳定型的骨折进行手法复位和外固定,对非稳定型骨折实施手术复位和内固定,并在复位准确、固定可靠的情况下,参考如下方案进行康复。

第一阶段
在复位和固定1周内,康复治疗的主要目标是控制和消除肿胀。
1、肿胀的控制。通过抬高、冰敷、适当加压包扎、休息等方式控制肿胀,可采用超短波(无热或微热)、磁疗等方法辅助消肿,必要时进行抗炎、脱水治疗。
2、活动度训练。保守治疗者,对未受累的关节(手部各关节、腕、肘等)进行主动活动;手术治疗且固定牢靠者,可对骨折邻近关节进行轻柔的主动活动。
3、肿胀消退后适时调整外固定支具。

第二阶段
复位和固定2-3周,康复治疗的主要目标是防止粘连、促进愈合。与此同时,应继续控制肿胀。
1、继续采用上述方法控制肿胀。可暂时去除支具进行轻柔的向心性按摩,稳定的内固定者可使用压力手套,保守治疗者和术后拆线者可进行冷热水交替浴。
2、继续对未受累的手指和关节进行活动度练习和肌腱滑动练习,对受累手指未固定的关节进行活动度练习肌腱滑动练习(内固定比较稳定的,也可临时卸下支具进行主动的活动度练习和肌腱滑动练习)。关节活动度练习和肌腱滑动练习是这个阶段的关键所在,练习要全面、充分,可以有效防止软组织粘连,同时还可促进软组织和骨骼的愈合。需要注意的是,第一掌骨基底骨折者应避免强行对掌活动。
3、功能性功能及力量练习。可在支具固定下进行轻柔的功能性活动;避免抗阻力活动。

第三阶段
复位和固定4-7周,康复治疗的主要目标是恢复活动度、力量和功能,消除已经发生的软组织粘连。在骨折基本愈合的情况下(用X光进行检查),可拆除支具(或者只在夜间休息及必要时使用支具)。
1、活动度练习。未受累掌骨和指骨活动度的全面恢复;骨折邻近关节的主被动活动度练习(保护骨折部位);非骨折邻近关节活动受限的情况下,可进行牵拉练习和关节松动。在活动度练习前可热敷,练习后可冰敷。
2、消除已经产生的粘连。继续肌腱滑动练习;主动背伸受限的情况下,若指间关节伸肌迟滞,可在指掌关节屈曲位重点进行指间关节伸展练习,若指掌关节伸肌迟滞,则可在指间关节屈曲状态下重点进行指掌关节伸展练习。
3、力量训练,在5-6周时,可利用橡皮筋、海绵球、硅胶团等工具进行手指力量及握力训练(保守治疗愈合不充分的情况下,练习时机可适当推迟)。
4、功能性活动。愈合良好的情况下可进行轻量日常活动;否则,应在支具的保护下进行轻量日常活动。

第四阶段
复位并固定8周以后。此阶段的目标在于获得全面恢复。
1、活动度练习。进行全范围的活动度练习,在愈合良好的情况下可进行外力辅助的牵拉练习,或者使用动力型支具及矫形器进行长时间、小力量的矫正。
2、力量训练。逐步开展全面的力量训练,使各个关节、各个肌肉的力量获得基本恢复(可与健侧对比)。
3、功能练习。逐步恢复到正常的日常活动,对不熟练、不协调的功能进行有针对性的反复训练,获得最佳神经肌肉协调性。

原文链接:http://www.jinlaiba.com/archives/32368.html

器之心报道

编辑:杜伟、陈萍

有了这个项目,大家终于可以亲身体验一把人体姿态估计成像的神奇之处了!

在 CV 领域,人体姿态估计(human pose estimation)利用目标检测模型和姿态估计模型来识别出人体各个关节的位置和网格,并已在动作识别、动画、游戏、运动捕捉系统中有着广泛的应用。

但遗憾的是,人体姿态估计常常见诸于学术研究中,普通读者很难亲身体验它的神奇成像效果。

近日,机器之心在 GitHub 上发现了一个有趣的项目「air-drawing」,作者创建了一个利用深度学习的工具,使你在配有摄像头的电脑端可以获得自己的手势姿态估计成像图

项目地址:https://github.com/loicmagne/air-drawing

此外,作者使用的深度学习模型还可以预测「向上」或「向下」的手势动作。动态效果展示图如下:

小编也尝试在自己的电脑上捕捉到了手势姿态估计网格图:


然后试着写了两个字「中国」,不知各位读者认得出来吗?!


试玩地址:https://loicmagne.github.io/air-drawing/

作者表示,试玩过程中不会收集用户信息。作者还优化了代码,使得该工具可以在大多数电脑上运行。电脑上的网络摄像头质量会对成像效果产生影响,调高屏幕亮度有助于更快地触发摄像头,并提升快门速度和帧率。如果手部一部分在框架之外,则手部检测无法正常工作。在绘图写字时,保持手指向上,手指向下时会影响指尖的检测。

技术细节

这个可以隔空作画的工具使用深度学习来完成,实现 pipeline 包含两个步骤:手势检测以及预测所要画的图,这两个过程都是通过深度学习来完成的。其中,手势检测使用了手部追踪解决方案 MediaPipe toolbox。

MediaPipe toolbox 项目地址:https://google.github.io/mediapipe/solutions/hands.html

绘图预测部分只用到了手指位置相关技术。输入是一个 2D 点序列(实际上,该项目使用的是手指的速度和加速度,而不是位置,来保持预测的平移不变),输出是二元分类「向上(pencil up)」或「向下(pencil down)」。


此外,项目作者还使用了简单的双向 LSTM 架构,并且做了一个小数据集(大约 50 个样本),数据标注使用「python-stuff/data-wrangling/」工具。一开始,项目作者想做一个实时的「向上 / 向下」预测,即在用户绘画的同时做出预测。然而,由于任务太难,导致结果很差,因此采用双向 LSTM。

关于深度学习 pipeline 细节,你可以在 jupyter-notebook 中的 python-stuff/deep-learning / 了解更多信息。

该应用程序可以在用户端使用,作者将 PyTorch 模型转换为. onnx,然后使用 ONNX Runtime,它非常方便,可以兼容很多层。

总体来说,这个 pipeline 还需要进一步完善,一些改进的想法包括:

  • 使用更大的数据集和更多的用户数据;
  • 对手指信号进行处理和平滑,减少对相机质量的依赖,提高模型的泛化能力。

作者答疑

可以隔空绘画的这个项目引来了众多网友的讨论,有人不禁感慨,「这太酷了!让我想起迪士尼的广告,他们会用发光的魔杖画出米老鼠的头。」

在网友表达惊喜的同时,也有人提出了自己的疑惑。项目作者在 reddit 上对部分网友的的疑问进行解答,我们列举其中一部分。

有网友表示,这是一个不错的项目,并有疑问——RNN 是从头开始训练的,还是在预训练模型的基础上进行微调的?

作者表示:「模型是从头开始训练的,但使用预训练模型可能是一个不错的建议。」


还有网友提问:「预测是实时的吗?那样的话,这将是一个真正的魔法。」

作者表示,预测是实时的。但遗憾的是,实时性能不是很好,所以必须使用双向 LSTM。

还有网友建议「使用 transformer 可以获得更好的性能」。

对于这个建议,作者表示自己曾尝试过自注意力层,但是结果并不理想。如果有一个更大数据集的话,采用 transformer 效果会更好。

参考链接:

https://www.reddit.com/r/MachineLearning/comments/pmqtj9/p_using_deep_learning_to_draw_and_write_with_your/

随着近几年移动营销页的火爆,催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效果。

我们需要制作 H5 的时候,最快的办法就是使用一些滑动插件库,如 iDangero.us 出品的 Swiper,百度 BE-FE 出品的 iSlider。通过这些翻页库提供的强大的配置功能,我们就能实现很酷炫的翻页效果。当然,这些库还支持自动播放,点击切换和当前页面指示等配置,所以还能用在网页上,实现一些 web carousel 的效果。

百度 H5 也先后使用了 Swiper 和 iSlider 作为 H5 运行时的翻页框架,随着用户越来越多,也遇到了一些问题:

  1. H5 平台和这些库不能很好贴合,有些配置项用不上,而有些必要的功能需要「Hack」的方式实现。
  2. 一些 H5 的元素多、动画多,在低端机型上翻页时,翻页时会有「卡顿感」和「粘滞感」,用户体验不好。

而我们希望的 H5 翻页库能和平台本身的功能完美贴合,在保持体积小的同时,在翻页的时候能做到「丝般顺滑」。于是我们就开始了研(zao)究(lun)之(zi)旅。

开始

H5 滑屏框架的开发,第一个问题就是:页面是否跟随手指滑动?这也是腾讯 ISUX 团队的《滑屏 H5 开发实践九问》的第一问(这篇文章原文出处现在是 404 ,大家可以在其他的转载网站看到),这里用这篇文章的图片说明一下这个问题。

上图:不跟随手指滑动,下图:跟随手指滑动。

左边的是不跟随手指滑动,只需要关注手指触碰开始和离开两个时间点,中间过程不用考虑。所以实现起来比较简单。但是用户的操作没有实时的反馈,体验不够好。因此,尽管实现起来更复杂,我们仍然决定实现前一种「跟随手指滑动」的效果。

起步

下图是跟随手指滑动的 H5 最直观的版本,所有的「页面」依次从上到下,首尾相接。需要说明一下,这里的「页面」打引号,是因为实际上他们都是 div,后文说的页面都指这些 div。同时,我们这里以最常见的竖直方向滑动为例,水平方向同理。

基本原理图

这些 div 的宽度和高度都是 100% 的容器高度,可视区域是中间的部分,我们监听 touchstart, touchmove, touchend 事件,跟鼠标拖拽的原理类似:

  1. touchstart 时,记下起点位置;
  2. touchmove 实时计算滑动的距离,让所有页面一起沿着 Y 轴 translate 这段距离。
  3. touchend 时,能得到最终的滑动距离,跟设定的阈值比较。进入到页面自动控制阶段:大于阈值则让页面滑动到下一页,小于阈值则恢复到起始位置。

深入探究

简单的版本在上一部分很容易就实现了,如果其他需求不多,页面上元素和动画比较少,基本上就够用了。但是本文要探究的是如何能做到「丝般顺滑」,其实就是两个字:性能。

性能的瓶颈是什么呢?

我们的目标是:在「三多一低」(页面多、元素多、动画多,配置低)的情况下,滑动翻页时,尽可能不产生卡顿。

我们分成两部分来看这问题:手指离开屏幕前和手指离开屏幕后。

手指离开屏幕前

此时比较耗费性能的操作是:当 touchmove 触发时,计算出了要移动的距离,所有的页面都需要沿着 Y 轴移动相同的距离。此时必然免不了进行 DOM 操作,而 DOM 操作是非常「昂贵」的,再加上 touchmove 事件的频繁触发,性能处理不够好的话,很容易出现卡顿。

为了优化性能,我们很自然的想到一个策略:减少 DOM 操作

这里面包含两部分:减少 DOM 操作的元素和减少 DOM 操作的属性。前者比如,看不到的页面不参与动画。后者比如,只改变元素的 css 属性的一个或几个。

减少 DOM 操作的元素

最开始简易的版本的例子中,touchmove 触发时,所有的页面都沿着 Y 轴移动。其实没有必要,因为相当一部分页面是看不见的。那一般情况下,我们最少需要操作几个页面呢?答案是两个。可以回想一下,我们滑动的时候,最多能同时看到两个页面。这个方法相对于所有的页面一起移动,成倍地提升性能。

减少 DOM 操作的属性

这个方法的主要意思是,只需要操作一次 DOM 能达到的效果,绝不用两次。实际上,对于 slide 动画,我们只需要改变页面的 transform的值,其他的 DOM 操作(增加 class,修改元素的 innerHTML)等能不做就不做。

我们得到了一个初步的方案:初始化时,所有的页面一次性全部置入 container,除了我们用到的两页,display 属性都设置为 none。touchmove 的时候,只有这两页的 transform 属性有变化。

touchmove 的过程,我们可以写成数学表达式:

s=f(x),x∈[0,sideLength]

s=f(x),x∈[0,sideLength]

x

x 表示手指滑动的距离,s

s 表示页面滑动距离,sideLength

sideLength 是当前滑动边的长度,如果是沿 y 轴滑动,则是页面高度。写到这里,就跟时下很流行的「数据驱动」的概念很类似了。我们要实现的就只有一个 render 函数,输入是用户的交互数据,输出是页面表现。

手指离开屏幕后

当手指离开屏幕时,我们就已经知道了这次滑动的结果(向上还是向下?翻页还是回弹?),要实现的只是动画效果,我们有两个选择:

方案一:复用 touchmove 的 render 逻辑,按照手指滑动的速度,使用 requestAnimationFrame 控制动画;

方案二:使用 css3 transition 动画;

方案一的优点在于:可以在手指滑动和动画过程使用同样的 render 函数,最大限度复用了代码,逻辑统一;同时可以精确控制动画的每一帧,动画曲线会比较流畅。 缺点就是可能存在的性能问题。方案二跟方案一刚好相反。其实说到底还是 js 动画 vs css 动画的问题。

动画性能实验

为了比较两个方案在 H5 翻页动画上的性能优劣,我们取一个稍微复杂点的例子:

H5:百度无人车招聘的 H5

动画:从第 1 页翻到第 2 页

CPU: 6 * slowdown

浏览器:Chrome 61.0.3163.100(64 位)

js 动画方案:点击这里

css 动画方案:点击这里

js 翻页动画方案,Profile 结果

css 翻页动画方案,Profile 结果

通过实验我们可以看到,js 的动画过程中,帧率大多维持在 30 fps 上下。而 css 动画,基本都在 60 fps 上下。而且在动画过程中,明显感觉 js 动画有卡顿。这种情况在一些 CPU 和显卡配置相对低的 Android 机型上尤为明显。对于这个问题有兴趣的同学,可以看一下 swiper 库的 raf 分支,这是本次对比测试所用到的 js 。

所以,尽管 js 的动画方案看起来比较「优雅」,能用「数据驱动」的理念,统一解决滑动过程和动画过程的问题。实际上性能有瓶颈,我们只能在手指离开屏幕后,采用 css 的动画方案以保证性能。正应了一句话「能用 css 做的,绝对不要用 js 解决」。

实施方案

下图形象地展示了我们实施的基本思路,只有两页:

currentPage :当前页面

activePage:即将要翻到的下一页

其余的页面都是初始化的时候加载进 DOM 结构,但是 display 为 none 并且 z-index 都是 0。这里展示「层叠」的状态是为了更形象的展示。

swiper 原理图

为了方便获取页面,我们采用双向链表保存页面结构。每个 page 具有 prev 和 next 分别指向上一个和下一个 page。

我们重点要关注的是,怎么样确定 activePage ?即下一个要去到的页面。答案很简单,其实,当用户开始触碰屏幕,并且滑动的时候,就能确定了:

  1. 滑动距离 x < 0,表示页面向上滑动,此时 activepage = currentPage.next
  2. 滑动距离 x > 0,表示页面向下滑动,此时 activepage = currentPage.prev

扩展

翻页效果

我们举的例子中的翻页效果是最普通的滑动效果。怎么样扩展支持立方体、翻转等效果呢?可以回头看看「手指离开屏幕前」部分,我们提出了 s=f(x)

s=f(x),x

x 是用户滑动距离,s

s 是页面滑动距离。我们把 s

s 扩展一下,变成「页面翻转角度」或「页面缩放比率」,就可以支持其他的效果了。

事实上,我们在滑动的时候,本身就是使用 css3 的 transform 属性,将其中的 translate, rotate, scale 适当的组合就能做出千变万化的翻页效果了。

更令人愉悦的动画

这里指的是 animation-timing-function,拿最简单的滑动效果举例。如果是线性的函数,用户滑动的速度始终等于页面滑动速度。而「感觉上」更流畅、更灵敏的应该是:刚开始页面滑动速度大于用户滑动速度,随着翻页的进行,两者趋于相同,过了某个点后,单位时间内,页面滑动速度开始逐渐小于用户滑动速度,将速度表示为距离,就可以得到 x

x 和 s

s 之间的关系如下图:

x

x 和 s

s 的关系图(横轴为 x

x,纵轴为 s

s)

在这里,不得不再提起两种动画方案: js 动画和 css 动画。

js 动画方案的一个优点是,可以精确控制动画的进程,而 css 无法做到。比如用户在 x = 0.8 的时候手指离开屏幕,因为采用的同一个 render,js 可以知道手指离开屏幕的瞬间 x 处于 0.8 的位置,接下来的动画由 requestAnimationFrame 完成,整个过程流畅且完整。

而 css 动画则不同,css 动画只有在动画开始之前设定 animation-timing-function,当用户在 x = 0.8 手指离开屏幕时,原本的 js 控制滑动过程中断,由 css 来完成剩余的动画,css 无法根据手指离开屏幕的瞬间动态计算 animation-timing-function ,所以在衔接的那个点,两者速度不匹配,会影响整体动画效果。

但遗憾的是,js 的动画方案有性能问题,我们在用户手指离开屏幕后的那一部分只能采取 css 动画方案。这个「更令人愉悦的动画」也只能用在手指滑动期间。

总结和展望

本文讲述了一个「丝般顺滑」的 H5 翻页库的开发过程中遇到的一些问题和对应的解决方法。基本的滑动翻页模型建立之后,重点关注了性能的问题,分为手指离开屏幕前手指离开屏幕后两个阶段。前一阶段主要聚焦于减少 DOM 操作。后一阶段聚焦于动画的性能,并且对比了 js 动画和 css 动画的性能数据,最后得出了在手指离开屏幕后使用 css 动画的结论。此外,我们还基于「数据驱动」的思想,在翻页效果动画函数两部分进行了扩展,增强了翻页库的功能,也丰富了 H5 的展现效果。

本文中尝试用「数据驱动」的思想去解释整个过程,但是因为性能问题只能暂时放弃,希望在未来能找到更好的方案。由于水平所限,文中难免会出现纰漏,欢迎大家批评指正,共同学习进步。感谢 Swiper 和 islider 翻页库的启发,特别感谢和 @Ronny 的热烈讨论。

本文所述的 swiper 库地址:https://github.com/fex-team/swiper。master 分支所用的代码是目前百度 H5 线上使用的。raf 分支是文中提到的使用 js 动画方案。

希望本文能帮助到您!

点赞+转发,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)

关注 {我},享受文章首发体验!

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接:http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/

作者:zhangbobell