使用场景
200万的logo, 自己动手实现
utojs版本
原理
修改img控件的cornerRadius属性的值
代码讲解
- UI
一个图片控件img显示logo
一个进度条用于调整圆角的值
一个文字显示进度条的值
ui.layout( <vertical gravity="center"> <img id="logo" src="file://./xiaomilogo.jpg" w="200dp" h="200dp"></img> <horizontal w="*" h="wrap_content" gravity="center" margin="10"> <text id="price" textSize="30sp" textStyle="bold" gravity="center"> 200 </text> <text textSize="30sp" textStyle="bold"> 万 </text> </horizontal> <seekbar id="seekbar" w="*" h="30dp" max="1000" margin="10 50 10 10" /> <text textSize="30sp" textStyle="bold" gravity="center"> 作者: 牙叔 </text> </vertical> );
- 手指在进度条滑动, 进度条监听到滑动事件, 就修改图片的圆角值
var seekbarListener = new android.widget.SeekBar.OnSeekBarChangeListener({ onProgressChanged: function (seekbar, progress, fromUser) { log(progress); ui.price.setText(Math.floor(progress) + ""); ui.logo.cornerRadius = progress; }, }); ui.seekbar.setOnSeekBarChangeListener(seekbarListener);
完整源码
"ui"; ui.layout( <vertical gravity="center"> <img id="logo" src="file://./xiaomilogo.jpg" w="200dp" h="200dp"></img> <horizontal w="*" h="wrap_content" gravity="center" margin="10"> <text id="price" textSize="30sp" textStyle="bold" gravity="center"> 200 </text> <text textSize="30sp" textStyle="bold"> 万 </text> </horizontal> <seekbar id="seekbar" w="*" h="30dp" max="1000" margin="10 50 10 10" /> <text textSize="30sp" textStyle="bold" gravity="center"> 作者: 牙叔 </text> </vertical> ); var seekbarListener = new android.widget.SeekBar.OnSeekBarChangeListener({ onProgressChanged: function (seekbar, progress, fromUser) { log(progress); ui.price.setText(Math.floor(progress) + ""); ui.logo.cornerRadius = progress; }, }); ui.post(function () { ui.price.setText("200"); ui.seekbar.progress = 200; }); ui.seekbar.setOnSeekBarChangeListener(seekbarListener);
声明
部分内容来自网络
小米logo不只是修改弧度
认真对比一下
本文实现的效果
只能说有个弧度变化
小米的新logo更圆润
本文仅供娱乐
大佬发声
群内有大佬说计算公式是
|x|n+|y|n=1 n=3
