本篇文章為大家展示了使用QML怎么實(shí)現(xiàn)一個(gè)圓環(huán)顏色選擇器，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鎮(zhèn)康企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站建設(shè)，鎮(zhèn)康網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

import QtQuick 2.0
import QtQuick.Controls 2.2
Item {
 id:baseItem
 width: 350
 height: width
 signal colorChanged(string newColor);
 property int circleWidth: 40;//圓環(huán)寬度
 property var curColor: undefined;

 Rectangle {
  id: control
  width: baseItem.width
  height: width
  color: "transparent"
  border.width: 1
  border.color: "black"
  anchors.margins: 10

  // 根據(jù)角度獲取顏色值
  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;
  }

  // 獲取旋轉(zhuǎn)角度
  function getRotateAngle (mouseX, mouseY) {
   var yPosOffset = mouseY - control.width/2; // 計(jì)算角度 : tan(x) = (y2-y1)/(x2-x1);
   var xPosOffset = mouseX - control.height/2;
   // 旋轉(zhuǎn)的弧度 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;
  }


  // 通過鼠標(biāo)所在點(diǎn)更新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);//發(fā)信號(hào)
  }

  // 鼠標(biāo)選擇圓環(huán)按鈕
  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
  }

  // 圓環(huán)畫布
  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);
   }
  }
 }
}

上述內(nèi)容就是使用QML怎么實(shí)現(xiàn)一個(gè)圓環(huán)顏色選擇器，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。