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)注