QML中的Canvas的畫(huà)布功能其實(shí)和js以及h5的Canvas基本一樣，以下是我使用QML的Canvas繪出漸變效果的代碼，在過(guò)程中出現(xiàn)的幾個(gè)問(wèn)題，都是由幾個(gè)關(guān)鍵的數(shù)據(jù)控制的，這個(gè)一般在網(wǎng)上和幫助文檔都很少有資料，記錄下
//mainView's right view background,the size is fiximport QtQuick 2.0import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2import QtQuick.Window 2.2Rectangle { width: 1364 height: 1080 border.width: 0 color: "transparent"; Canvas{ id:myCanvas; anchors.fill: parent; onPaint: { var ctx = myCanvas.getContext("2d"); var grd = ctx.createLinearGradient(0,0,1364,0); //設(shè)置漸變的范圍 x,y,x1,y1 //由于設(shè)置的時(shí)兩個(gè)，所有只有兩種，當(dāng)設(shè)置出現(xiàn)的三個(gè)的時(shí)候，會(huì)正常 1-2-3類(lèi)型的顯示漸變（漸變的屬性時(shí)根據(jù)設(shè)置的顏色的值的變化，r，g，b，a） grd.addColorStop(0.0,Qt.rgba(0,0,0,0)); grd.addColorStop(0.32,Qt.rgba(0,0,0,0.75));//漸變?cè)O(shè)置到40%的位置時(shí)停止 grd.addColorStop(1.0,Qt.rgba(0,0,0,0.75));//漸變?cè)O(shè)置到100%的位置時(shí)停止 ctx.fillStyle = grd; ctx.beginPath(); //可去除邊框 ctx.fillRect(0,0,1364,1080); //不可去除邊框// ctx.rect(0,0,1364,1080);;// ctx.fill(); ctx.stroke(); } Component.onCompleted: { requestPaint(); } }}createLinearGradient()函數(shù)里面的參數(shù)分別是x,y,x1,y1，對(duì)此特意測(cè)試過(guò)，當(dāng)x和x1相同時(shí)，實(shí)現(xiàn)的漸變是上下矩形形狀的漸變，同理y和y1相同時(shí)，實(shí)現(xiàn)的漸變是左右矩形形狀的漸變，當(dāng)兩者都不相同的時(shí)候，實(shí)現(xiàn)的是對(duì)角線類(lèi)型的漸變。
第二個(gè)就是onPaint信號(hào)的問(wèn)題，Canvas提供paint信號(hào)，只有在發(fā)出requestPaint()信號(hào)的時(shí)候，才會(huì)調(diào)用onPaint的內(nèi)容。
第三個(gè)就是繪出的圖形帶有邊框的問(wèn)題，這個(gè)問(wèn)題可以看上面的代碼的注釋部分，fillRect()與fill()，rect()函數(shù)之間的區(qū)別，個(gè)人理解是，fillRect()字面意思就是填充rect，而不是先畫(huà)出rect，再fill，是直接跳過(guò)畫(huà)rect，進(jìn)行fill對(duì)應(yīng)的rect區(qū)域
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
