首页 » AppInventor » App Inventor 多点触控画布:左右互搏

App Inventor 多点触控画布:左右互搏

​在金庸的《神雕侠侣》中,小龙女和周伯通被困在一处山洞,闲聊之中周伯通提到他在桃花岛住了十多年,没人陪伴只好自己跟自己打架。介绍其分心二用、左右互搏之术,第一课便是“左手画方、右手画圆”。聪明如黄蓉怎么都学不会,而憨傻如郭靖只用几天就学会。

周伯通:“这功夫很难学吧?说难是难到极处,说容易也是容易之至。”

小龙女:“难道蠢人学功夫,反而会胜过聪明人?我可不信。”

我们来做个手机应用,读者可以自测是否有学得“左右互搏神通”的天赋。为了便于区分,左右两边的绘图使用不同的颜色。

这是一个黑科技的开始。

启动浏览器打开 App Inventor WxBit 汉化增强版版:普通用户:https://app.wxbit.com ,VIP会员:https://vip.wxbit.com 。新建项目“左方右圆”。

在Screen1的组件属性中设置应用名称为“神通测试”,标题为“左右互搏神通传人测试(双击清空画布)”,屏幕方向设为“锁定横屏”。

从“绘图动画”中拖入画布,将宽和高设为充满。从“传感器”中拖入“计时器”组件,不勾选“是否启用计时”,因为我们只使用计时器获取时间。如图:

切换到逻辑视图,定义左右两边的画笔颜色,并在画布初始化时设置画笔线宽:

应用标题中描述了“双击清空画布”功能,先来实现:

“触摸点序号”:为 1-8 的数字,目前最多支持8个触摸点。触摸点序号在按下之后从小到大分配,在松开时回收,序号在触摸点按住移动期间不变。例如顺序按下3个手指:左手食指、右手食指和右手中指,那么触摸点序号分别是 1、2和3。接着松开右手食指,序号2被回收,屏幕上手指的序号是1和3。此时如果再按下一个手指,分配的触摸点序号将是2。

利用这个特性,实现双击判断和设置画笔颜色。

当两次按下的触摸点序号都是1时,说明是按下一个手指并松开后再按下。判断时间间隔在500毫秒内就是双击。实际上这样判断并不准确。还应该判断手指移动的范围,否则会导致画线松开时再按下一个手指被当作双击。请读者研究改进。

我们判断手指按下的区域,如果X坐标小于画布宽度的一半,说明按在左边,将使用左边颜色画线,在画布的扩展属性中记录触摸点与对应画笔颜色。

接下来,实现触摸点移动画线:

根据前后点画出的线是折线,并不平滑。由于线宽较大,在转折位置可以看到明显裂缝。为了弥补,需要在转折处画圆,将裂缝填平。没有画圆的效果是怎么样的?请读者测试。

完整的逻辑代码如下:

项目这么简单,就不发布到展厅了。

来一张杨老师的测试图:

“资质平平,不能修炼。” —— 周伯通

扩展阅读:《左手画圆,右手画方,其难度在哪里?原理是什么?

原文链接:App Inventor 多点触控画布:左右互搏,转载请注明来源!