本篇文章为大家展示了使用QML怎么实现一个圆环颜色选择器,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为镇康企业提供专业的网站制作、网站建设,镇康网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
import QtQuick 2.0 import QtQuick.Controls 2.2 Item { id:baseItem width: 350 height: width signal colorChanged(string newColor); property int circleWidth: 40;//圆环宽度 property var curColor: undefined; Rectangle { id: control width: baseItem.width height: width color: "transparent" border.width: 1 border.color: "black" anchors.margins: 10 // 根据角度获取颜色值 function getAngleColor(angle) { var color, d; if (angle < Math.PI * 2 / 5) { // angle: 0-72 d = 255 / (Math.PI * 2 / 5) * angle; color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0 } else if (angle < Math.PI * 4 / 5) { // angle: 72-144 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5); color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0 } else if (angle < Math.PI * 6 / 5) { // angle: 144-216 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5); color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255 } else if (angle < Math.PI * 8 / 5) { // angle: 216-288 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5); color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255 } else { // angle: 288-360 d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5); color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0 } return color; } // 获取旋转角度 function getRotateAngle (mouseX, mouseY) { var yPosOffset = mouseY - control.width/2; // 计算角度 : tan(x) = (y2-y1)/(x2-x1); var xPosOffset = mouseX - control.height/2; // 旋转的弧度 hudu, 角度angle var hudu = 0, angle = 0; if (xPosOffset != 0 && yPosOffset != 0) { hudu = Math.atan(Math.abs(yPosOffset / xPosOffset)); } if (xPosOffset === 0 && yPosOffset === 0) { return angle; } else if (xPosOffset < 0 && yPosOffset < 0) { angle = hudu * 180 / Math.PI; // 左上 } else if (xPosOffset === 0 && yPosOffset < 0) { angle = 90; // 上 中间 } else if (xPosOffset > 0 && yPosOffset < 0) { angle = 180 - hudu * 180 / Math.PI; // 右上 } else if (xPosOffset > 0 && yPosOffset === 0) { angle = 180; // 上 下 中间 } else if (xPosOffset > 0 && yPosOffset > 0) { angle = 180 + hudu * 180 / Math.PI; // 右下 } else if (xPosOffset === 0 && yPosOffset > 0) { angle = 270; // 下 中间 } else if (xPosOffset < 0 && yPosOffset > 0) { angle = 360 - hudu * 180 / Math.PI; // 左下 } return angle; } // 通过鼠标所在点更新Canvas画图信息 function updateCanvasByMousePos(x, y){ var currentAngle = control.getRotateAngle(x, y); console.log(x, y, currentAngle); updateCanvasByAngle(currentAngle); } //通过角度更新Canvas画图信息位置 function updateCanvasByAngle(angle){ var newX = control.width/2 + - Math.cos(angle*Math.PI/180) * (control.width/2-baseItem.circleWidth/2-2*control.anchors.margins); var newY = control.height/2 - Math.sin(angle* Math.PI/180) * (control.height/2-baseItem.circleWidth/2-2*control.anchors.margins); console.log("new : ", newX, newY,"\ncur color is :" + baseItem.curColor); handle.xDrawPos = newX; handle.yDrawPos = newY; handle.requestPaint(); baseItem.curColor='rgb('+control.getAngleColor(((angle+180)%360)/180 * Math.PI)+')'; baseItem.colorChanged(baseItem.curColor);//发信号 } // 鼠标选择圆环按钮 Canvas { id:handle width : parent.width; height : width property int xDrawPos: 0 property int yDrawPos: 0 onPaint: { var ctx = getContext("2d") ctx.clearRect(0,0,width,height); ctx.beginPath(); ctx.arc(xDrawPos, yDrawPos, baseItem.circleWidth/2 + 10, 0, 2 * Math.PI, false); ctx.fillStyle = 'lightblue'; ctx.fill(); ctx.strokeStyle = 'transparent'; ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.arc(xDrawPos, yDrawPos, baseItem.circleWidth/2 - 2, 0, 2 * Math.PI, false); ctx.fillStyle = baseItem.curColor; ctx.fill(); ctx.strokeStyle = 'transparent'; ctx.stroke(); ctx.closePath(); } z:1000 } // 圆环画布 Canvas { id: canvas width: parent.width-4*control.anchors.margins; height: parent.height anchors.centerIn: parent onPaint: { var ctx = getContext("2d") var iSectors = 360; var iSectorAngle = (360/iSectors)/180 * Math.PI; // in radians ctx.translate(width/2, height/2); for (var i = 0; i< iSectors; i++) { var startAngle = 0; var endAngle = startAngle + iSectorAngle; var radius = (width/2-1); var color = control.getAngleColor(iSectorAngle * i); ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, radius, startAngle, endAngle, false); ctx.closePath(); ctx.strokeStyle = 'rgb('+color+')'; ctx.stroke(); ctx.fillStyle = 'rgb('+color+')'; ctx.fill(); ctx.rotate(iSectorAngle); } ctx.restore(); ctx.save(); ctx.translate(0,0); ctx.beginPath(); ctx.arc(0, 0, width/2-baseItem.circleWidth, 0, 2 * Math.PI, false); ctx.fillStyle = 'white'; ctx.fill(); ctx.strokeStyle = 'transparent'; ctx.stroke(); ctx.restore(); } MouseArea { id:colorSelectorMouseArea anchors.fill: parent; onMouseXChanged: { control.updateCanvasByMousePos(mouseX, mouseY); } } Component.onCompleted:{ control.updateCanvasByAngle(0); } } } }
上述内容就是使用QML怎么实现一个圆环颜色选择器,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
名称栏目:使用QML怎么实现一个圆环颜色选择器
分享网址:https://www.cdcxhl.com/article18/ihsjgp.html
成都网站建设公司_创新互联,为您提供网站排名、移动网站建设、微信公众号、App开发、响应式网站、
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联