天天看点

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

szu-jawenos

因为查了很多资料都没ai2旋转按钮的教程,所以自己做了个,不喜勿喷

1.打开ai2,随便你网页版,在线版,离线版,能用就行

2.将画布跟图像精灵调出来,画布的背景图片是转盘,图像精灵的图片是指针,两者的高跟宽都要设置为相同,即(a180180,b180180)其他也行,但最好是正方形,因为正方形最好调,我们要实现的就是拖动指针然后在转盘上面动,而且有个数据是顺时针跟着变大,例如下图的仪表盘,转动就会使一个标签文本跟着变大或变小。

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

3.首先是要实现能动,用的是下图模块,指针是图形精灵的命名

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值
app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

这就能动了,但是你试下就会发现有很大的问题,数据不是跟着变大的,因为ai2的定义转向的问题,它是逆时针有个0到180,顺时针有-1到-180,自己试一下将它显示在一个标签上看下就知道了

4.方法

首先改变坐标系,画布默认的坐标的原点是在左上角,现在要构建一个新的坐标系

新坐标系:原点为图片的中心,然后根据我的转盘形状构建一个坐标系,自己拿草稿纸比划下你的轮盘哪里是0度,哪里是360

下图的角度2是我构建的新的坐标系

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

例如我构建的就是下图(网图,侵删),0到100就是0到270度

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

构建好坐标系后,点击画布会得到响应的角度值,然后将它通过相应的比例转化为文本值

像电流值

I=angle/270*20A(如下)

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

想要限制范围的话可以用下图

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

5.最后要实现点击电流值,轮盘的指针指向对应的位置

这里有点绕,先将它转化为你构建的坐标系,然后根据你构建的坐标系对应为实际的转向

app inventor2(ai2)带范围的旋转按钮显示对应的大小文本值

6.总结

(1)原理很简单,就是构建一个新的坐标系,然后将点击的实际画布坐标转化为你构造的坐标系的角度值,然后就可以通过这个角度值/转盘范围占据的角度值*相应的比例得到对应的旋钮开关值了

(2)要将已有的文本值转换为指针的方向,首先将文本值通过上面变换的相反流程转换为构造的角度值,然后再通过对应关系把它转化为实际指针的方向

所有上面操作的原因是因为ai2提供的模块坐标系跟我实际的轮盘坐标系不同,所以才这样麻烦