连续 30 天 玩玩看 ProtoPie - Day 12

第二种启动相机的方法

昨天勾选 Camera 的 Auto Start 来启动相机。

今天使用第二种方法,就是 Start Trigger 。

我们先把昨天 Camera 的 Auto Start 取消勾选。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bPhhXryJSQ.png

接着帮 Camera 选择 Start 这个 Trigger ,而底下的 Response 选择 Camera 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941l8XmT0w4OH.png

https://ithelp.ithome.com.tw/upload/images/20210927/20141941SW6ErsZve1.png

这样就会跟昨天看到的 Auto Start 得到一样的结果,让手机的相机能被 ProtoPie Player 的 App 使用。

切换前後相机

下一步我们要切换前後相机,先选择左上角这个  Btn / Switch 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941XxT8vuDuQ2.png

对应到的是下面右边这个按https://ithelp.ithome.com.tw/upload/images/20210927/20141941mLQ33se09N.png钮。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941f09W1cIsjH.png

我们选择 Tap 这个 Trigger 然後 Camera 的 Response 。
不过 Camera 里面我们选择 Switch 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941qSBndVBAcM.png

接着只要在上面 Preview 里面点一下蓝色小三角形,你的手机上的 ProtoPie Player 就会自动更新罗。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bkJV0onbZN.png

按那个钮就能切换前後相机了!

模拟相机拍照

最後我们就是要模拟相机拍照,我们选择 Btn / Shutter ,然後用 Tap 这个 Trigger 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941Pf6h6AJYRm.png

Response 一样用Camera ,Layer 也是选择 Camera 1,只是这次要选择 Stop 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941lZokOx19pd.png

这时候 Stop 会发生什麽事情呢,这毕竟只是个模拟让画面静止(所以才是Stop)。

请把他想像成萤幕截图一样。

未来如果你想要对 Camera 1 这个 Layer 做什麽,例如放大缩小,都是可以模拟出来的。

模拟文字输入

接着我们要来实作文字输入。

我们先来到 Settings 页面。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941PspAk892dv.png

左上角选择 Text > Input 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941JTZFygCt65.png

然後在页面上选个地方放上去。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941jzS7pUKbzc.png

虽然直接 Preview 只能透过电脑键盘输入,使用手机 ProtoPie Player 时就能跟真实的 app 一样直接用手机键盘。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941CEeYRaROj8.png

右边的选项里面,除了可以选择单行的输入匡,也能选择多行的输入框。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941cSifp2dgYG.png

但你看我这样文字全部都挤在一起,这时候就要勾选右手边的 Auto Height ,让文字输入筐跟着长大。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941wqRcbExGSe.png

接着最重要的是输入框里面的提示文字 Placeholder 。

https://ithelp.ithome.com.tw/upload/images/20210927/201419416pOqeLr7qu.png

你可以选择文字背景的颜色、编框圆角、padding、boarder (box model那样)...等。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941T32Q636hHO.png

我们简单把背景颜色取消勾选就好。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941JIGAOWblLG.png

接下来最棒的地方是很多很糟糕的 app 会有的情况,就是输入的时候给你难用的键盘...

这边可以选择你要 ProtoPie 使用哪种键盘,你用手机测试的时候就会出现。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941uLxSxbj80O.png

https://ithelp.ithome.com.tw/upload/images/20210927/20141941jY7BdE9hqD.png

https://ithelp.ithome.com.tw/upload/images/20210927/201419418EtqzgKWG4.png

甚至 iOS 还可以用 dark mode 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941i8aA3IthYt.png

如果你要输入密码...也行。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bPq7AKKXu1.png

有时候就是会突然醒来,然後有些事情变得好清楚。

明天继续。


<<:  Day27 切版笔记 - 破格式设计

>>:  建立第一个RESTful api server(实作篇)-1(Day12)

服务器安装libsodium支持chacha20&salsa20

使用 salsa20 或 chacha20 或 chacha20-ietf 算法,需要安装 libs...

Day 24 - WooCommerce: 建立信用卡付款订单 (下)

昨天晚上完成了建立信用卡付款订单的主要逻辑,在操作购物车,进到结帐页面後,填写完收件人资料,按下结帐...

30天轻松学会unity自制游戏-修改Player程序

这篇要把上一篇制作的HP条装在Player身上,在装之前先给Player有个死亡动画,一样把爆炸画面...

第 51 天 - 研究 shell 解释器 - part1

今天研究 shell 解释器 鸟哥说建议 shell 开头都要写 #!/bin/bash 我这边查询...