拓冰建站拓冰建站
首页 / 资讯中心 / 正文

QML 自定义按钮:带确认的圆形分区按钮

目录最终效果拆开讲讲画环形扇形中央确认按钮双层命中检测其他细节几个可以调的参数什么时候用小结完整代码工程下载上一篇做了四分区的圆形方向按钮,这篇在它基础上升级,外环是四个方向扇形,中央多一个圆形确认按钮,形成方向选择 + 确认的组合控件。游戏手柄的 D-Pad + 确认键、车载导航的方向选择 + OK 键、智能电视遥控器,都是这种布局。最终效果280x280 的控件,外环四个方向扇形,中央一个深灰色 OK 确认按钮。5 个区域都能独立悬停、按压和点击。拆开讲讲跟上一篇的核心区别有两个,扇形从实心改成环形,中央加了一个独立按钮。其他(命中检测、MouseArea 交互、方向箭头)思路一样。画环形扇形普通扇形是moveTo(cx,cy)→arc(outerR)→closePath()。环形扇形要画两条弧。for (var i = 0; i 4; i++) { ctx.beginPath() ctx.arc(cx, cy, rOut, starts[i], ends[i], false) // 外弧,顺时针 ctx.arc(cx, cy, rIn, ends[i], starts[i], t
分享:

看完干货,该让你的企业上线了

免费需求沟通 · 48 小时内出具建站方案 · 河南本地可上门