1.Canvas介紹
Canvas是一個允許繪制直線和曲線、簡單和復雜的形狀、圖形和參考的圖形影像，它還可以添加文本、顏色、陰影、漸變和圖案，并執行低級別像素操作，Canvas輸出可以另存為影像檔案或序列化到URL，
例如，以下代碼創建一個Canvas專案，該專案具有高度為100像素、寬度為200像素的繪圖區域：
import QtQuick 2.0 Canvas { id: mycanvas width: 100 height: 200 onPaint: { var ctx = getContext("2d"); ctx.fillStyle = Qt.rgba(1, 0, 0, 1); ctx.fillRect(0, 0, width, height); } }
目前Canvas項僅支持Context2D，
Canvas常用屬性如下所示:
- available : bool,該屬性用于設定Canvs是否可用，只有為true時后續的操作才有效；
- canvasSize : size,畫布大小,默認情況下，畫布大小與當前Canvas的width和height相同.
- context : object,保存活動的繪圖背景關系，如果畫布已經準備好，并且成功呼叫了getContext()，或者contextType屬性已經設定了支持的背景關系型別，那么這個屬性將包含當前的繪圖背景關系，否則為空，
- contextType : string，保存繪圖背景關系的型別,對于Context2D,該值將為"2d"
- renderStrategy : enumeration,保存當前畫布渲染策略,取值有以下幾種:
- Canvas.Immediate - 在UI主執行緒中立即執行圖形命令(默認)
- Canvas.Threaded - 當前要繪制的圖形延遲到專用的執行緒里執行(不在UI主執行緒中立即執行)
- Canvas.Cooperative - 當前要繪制的圖形延遲到應用程式的全域渲染執行緒
- renderTarget : enumeration,渲染目標.取值有以下幾種:
- Canvas.Image -渲染到記憶體中的影像緩沖區(默認)
- Canvas.FramebufferObject -渲染到OpenGL幀緩沖區
Signals:
- imageLoaded() : 加載影像時發出此信號，
- paint(region) : 當需要渲染區域時，會發出此信號，我們可以在該信號接收器里寫入要繪制的內容
- painted() : 在執行所有背景關系繪制命令并渲染Canvas(onPaint之后)后發出，
Methods:
- cancelRequestAnimationFrame(handle) : 取消請求影片框架（句柄）
- object getContext(contextId, ... args) : 回傳圖形背景關系，如果沒有可用的背景關系，則回傳null，在第一次呼叫getContext之后，后續再次呼叫時都將回傳相同的背景關系物件
- isImageError(image) : 如果影像加載失敗，則回傳true，否則回傳false，
- isImageLoaded(image) ： 如果影像已成功加載并準備好使用，則回傳true，
- isImageLoading(image) : 如果影像當前正在加載，則回傳true，
- loadImage(image) : 異步加載影像，一旦影像準備好，將發出imageLoaded()信號，加載的影像可以使用unloadImage()方法卸載，
- markDirty(area) : 將給定區域標記為等待重繪的區域(只會重繪一次)，只要該此區域為可見區，畫布渲染器將重新繪制它，這將觸發requestPaint信號，
- int requestAnimationFrame(callback) : 影片計時器,它會自動根據電腦配置來計算重繪幀率,一般與螢屏重繪頻率一致,它的回傳值是一個計數值,可以獲取當前呼叫了callback多少次
- requestPaint() : 請求重新繪制整個可見區域,將會重新發出paint信號
- bool save(filename) :將當前畫布內容保存到影像檔案檔案名中，保存的影像格式由檔案名的后綴自動決定，成功時回傳true,比如save("1.png")
- string toDataURL(mimeType) : 回傳畫布中影像的資料URL，mimeType引數默認為“image/png”，
- unloadImage(image) :卸載影像后，除非再次加載影像(loadImage()、Context2D::createImageData()和Context2D::drawImage())，否則畫布背景關系將無法繪制影像
示例如下所示:
Canvas { id: canvas property int widthLen : 50 width: 100 height: 200 onPaint: { var ctx = getContext("2d"); var raf; function draw() { ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = Qt.rgba(1, 0, 0, 1); ctx.fillRect(0, 0, widthLen, height); widthLen = (widthLen + 1) % canvas.width raf = requestAnimationFrame(draw); console.log("raf" + raf); } draw(); } }
這里我們設定的是每到了螢屏重繪時間點,就將繪制的寬度將會加1,而getContext("2d")是用來獲取Context2D物件.
requestAnimationFrame函式在影片中非常重要,比如我們要繪制一個移動的小球,我們就必須使用該函式,不能使用Timer定時器,因為Timer定時器和螢屏重繪時間點不一致,如果過快就導致過度繪制,增加開銷,過慢就導致影片不流暢
接下來我們主要還是學習Context2D物件.
2.Context2D物件的屬性和方法
參考https://www.w3school.com.cn/tags/html_ref_canvas.asp
Properties
- canvas : QtQuick::Canvas,保存當前Context2D要繪制的哪個畫布
- fillRule : enumeration,填充規則,取值有以下幾種:
- Qt.OddEvenFill : 奇偶填充
- Qt.WindingFill : 纏繞填充(默認值)
- fillStyle : variant.填充的樣式,樣式可以是包含CSS顏色字串、CanvasGradient或CanvasPattern物件,比如:
- 'rgb(red, green, blue)' - for example: 'rgb(255, 100, 55)' or 'rgb(100%, 70%, 30%)'
- 'rgba(red, green, blue, alpha)' - for example: 'rgb(255, 100, 55, 1.0)' or 'rgb(100%, 70%, 30%, 0.5)'
- 'hsl(hue, saturation, lightness)'
- 'hsla(hue, saturation, lightness, alpha)'
- '#RRGGBB' - for example: '#00FFCC'
- Qt.rgba(red, green, blue, alpha) - for example: Qt.rgba(0.3, 0.7, 1, 1.0)
- CanvasGradient或CanvasPattern物件具體參考createLinearGradient(), createRadialGradient(), createPattern()
- font : string,字體設定,與 CSS font 屬性相同,比如:
- font-style :規定字體樣式，可能的值：normal、italic(斜體)、oblique(傾斜)
- font-variant : 規定字體變體，可能的值：normal、small-caps(所有小寫字母均轉換為大寫,但是尺寸會變的更小)
- font-weight : 規定字體的粗細，可能的值：normal、bold(粗體)、bolder(更粗的粗體)、lighter(細體)、或者0~99數字
- font-size : 字號,后綴名可以為px(像素)、pt(磅數)
- line-height ：行高,默認為line-height: 100%,如果比100%小,那么間距將會緊湊
- font-family: 字體族,常用的有serif、sans-serif、cursive、fantasy、monospace
- 可以按順序設定如下屬性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
- 如果不設定其中的某個值,則使用默認值,比如: ctx.font = "30px sans-serif
- globalAlpha : real,保存應用于渲染操作的當前alpha值，該值必須在0.0（完全透明）到1.0（完全不透明）的范圍內，默認值為1.0，
- globalCompositeOperation : string,組合模式,取值有:
- source-atop - A atop B. 在目標影像頂部顯示源影像，源影像位于目標影像之外的部分是不可見的，
- source-in - A in B. 在目標影像中顯示源影像，只有目標影像內的源影像部分會顯示，目標影像是透明的，
- source-out - A out B. 在目標影像之外顯示源影像，只會顯示目標影像之外源影像部分，目標影像是透明的，
- source-over - 默認，在目標影像上顯示源影像，(default)
- destination-atop - B atop A.在源影像頂部顯示目標影像，源影像之外的目標影像部分不會被顯示
- destination-in - B in A. 在源影像中顯示目標影像，只有源影像內的目標影像部分會被顯示，源影像是透明的，
- destination-out - B out A. 在源影像外顯示目標影像，只有源影像外的目標影像部分會被顯示，源影像是透明的，
- lighter - A plus B. 顯示源影像 + 目標影像.每一點都是先畫的和后畫的同一點的顏色之和，注意顏色的最大值為255，所以白色一直是白色
- copy - A (B is ignored). 顯示源影像，忽略目標影像，
- xor - A xor B. 使用異或操作對源影像與目標影像進行組合，
- lineCap : string,繪制結束線帽的樣式，它可能是下面的值之一：
- butt - 線的兩端有垂直于線方向(默認值)
- round -線的兩端有直徑等于線寬的半圓
- square -線的兩端有個,長等于線寬，寬等于1/2線寬的矩形，
- lineDashOffset : real,設定虛線偏移量，默認的線破折號偏移值為0，此屬性是在QtQuick 2.11中引入的，另請參見getLineDash()和setLineDash()，
- lineJoin : string,兩條線交匯時創建的拐角型別，當線的子路徑上存在任何本屬性的設定，它將在線的連續上共享本屬性,可能的屬性值如下：
- bevel - 創建斜角
- round - 創建圓角，直徑為線寬，圓心為交匯點，
- miter - 創建尖角(默認值)
- lineWidth : real,線的寬度，如果填入<0的值，則被忽略
- miterLimit : real,設定尖角的最大長度,兩條線交匯處內角和外角之間的距離，默認值為10.0
- shadowBlur : real,用于陰影的模糊距離，
- shadowColor : string,陰影顏色
- shadowOffsetX : qreal,陰影的水平偏移距離
- shadowOffsetY : qreal,陰影的垂直偏移距離
- strokeStyle : variant,筆劃的顏色,用于線環繞形狀的填充樣式，樣式能是CSS顏色， CanvasGradient或者CanvasPattern顏色，無效值被忽略，默認值是'#000000'，
- textAlign : string,文本對齊(文本的水平位置)方式,取值有:
- start(默認值)
- end
- left
- right
- center
- textBaseline : string,文本基線(文本的垂直位置)設定,取值有:
- top
- hanging
- middle
- alphabetic(默認值)
- ideographic
- bottom
Methods
object arc(x, real y, real radius, real startAngle, real endAngle, bool anticlockwise) // 繪制弧線,圓心為(x,y),radius半徑,起始結束角度startAngle、endAngle、anticlockwise逆時針(默認為true) object arcTo(x1, real y1, real x2, real y2, real radius) // 根據起點(x1,y1)和終點(x2,y2),還有radius半徑來繪制弧線 object beginPath() // 設定為新路徑,并會重置當前路徑,如果繪制線,呼叫它后切記要使用moveTo()來重新指定開始位置 object bezierCurveTo(cp1x, real cp1y, real cp2x, real cp2y, real x, real y) // 由(cp1x,cp1y)和(cp2x,cp2y)控制線,在當前位置和給終點(x,y)之間添加一條三階貝塞爾曲線，如果創建二次貝塞爾曲線請參考quadraticCurveTo() object clearRect(x, real y, real w, real h) // 將（x,y,w,h）指定的矩形中畫布上的所有像素清除為透明色， object clip() //從當前路徑創建裁剪區域，區域外的任何部分都不顯示，使用clip()之前需要設定要裁剪的路徑： //首先呼叫context.beginPath()設定起始路徑， //通過呼叫lineTo、arcTo、arc、moveTo等方法的聯合和closePath方法來定義剪切路徑， //呼叫context.clip()方法來剪切區域 //最后繪制時,只會顯示裁剪的區域內的內容 object closePath() //如果物件的路徑沒有子路徑，則該方法將不執行任何操作，否則，創建從當前點到開始點的路徑, object createConicalGradient(x, real y, real angle) // 回傳一個CanvasGradient圓錐漸變物件，該漸變圍繞中心點（x,y）逆時針插值顏色，起始角度角度角度2以弧度為單位， CanvasImageData createImageData(imageUrl) // 通過加載的imageUrl影像來創建CanvasImageData物件，注意：在此函式呼叫之前，必須已加載imageUrl，否則將回傳空的CanvasImageData物件，
// 加載可以參考Canvas::loadImage()、QtQuick::Canvas::unloadImage()、和QtQuick::Canvas::isImageLoaded， CanvasImageData createImageData(imageData) // 通過CanvasImageData來創建一個相同的CanvasImageData物件， CanvasImageData createImageData(sw, real sh) // 使用給定的寬高來創建一個空的CanvasImageData物件， object createLinearGradient(x0, real y0, real x1, real y1) // 創建一個CanvasGradient線性漸變物件.該漸變沿起點（x0,y0）和終點（x1,y1）之間的直線過渡顏色，顏色可以通過addColorStop()來插入 variant createPattern(image, string repetition) // 用給定的image和repetition引數創建一個帶圖片的CanvasPattern調色板物件,image必須是個有效的物件,比如:CanvasImageData物件或已加載的imageUrl repetition取值有: "repeat" - both directions,xy方向重復填充(默認) "repeat-x - horizontal only,僅x方向 "repeat-y" - vertical only,僅y方向 "no-repeat" - neither variant createPattern(color, enumeration patternMode) : 根據給定的color和調色板填充樣式，回傳呼色板物件，patternMode填充樣式比如有：Qt.SolidPattern : 全部填充,具體參考Qt::BrushStyle. object createRadialGradient(x0, real y0, real r0, real x1, real y1, real r1) : 創建一個CanvasGradient半徑漸變物件.回傳一個起點為(x0,y0)，半徑r0；終點為(x1,y1)，半徑為r1的徑向漸變 drawImage(image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh) :將image上起始點(sx,sy)，寬sw，高sh的影像，繪制到畫布上起始點(dx,dy),寬dw，高dh的位置(可以實作縮放效果) 注意圖片的型別可以是Image子類或圖片的url地址或CanvasImageData物件，當提供Image子類時，如果圖片沒有完成裝載，這個方法什么都不畫，如果提供圖片url,則需要loadImage()加載才能使用 drawImage(image, real dx, real dy, real dw, real dh): 將提供的圖片繪制到畫布的起始點(dx,dy),寬dw，高dh的位置 drawImage(image, real dx, real dy) : 將提供的圖片繪制到畫布的(dx,dy)位置 object ellipse(x, real y, real w, real h) : 創建一個邊界矩形為（x,y,w,h)的橢圓，然后將之作為閉合子路徑添加到路徑中，橢圓是順時針方向的曲線，起點和完成點在0度（3點鐘方向） object fill() ：使用fillStyle屬性來填充路徑 object fillRect(x, real y, real w, real h) : 使用fillStyle屬性來繪制矩形 object fillText(text, x, y) : 在給定位置（x,y）填充指定的文本 CanvasImageData getImageData(x, real y, real w, real h) : 回傳一個CanvasImageData物件，其中包含由（x,y,w,h）指定的畫布矩形的影像資料， array getLineDash() : 獲取虛線陣列,另請參見setLineDash()和lineDashOffset， object isPointInPath(x, real y) : 如果點（x,y）位于當前路徑中，則回傳true， object lineTo(x, real y) : 從當前位置到（x,y）點繪制一條線， object measureText(text) : 獲取一個具有寬度的物件,比如在繪制文本之前解文本的寬度:ctx.measureText(text).width object moveTo(x, real y) : 創建新路徑，把路徑移動到畫布中的指定點，移動的時候不會創建線條 object putImageData(imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight) : 將給定imageData物件中的資料繪制到畫布上 //(dx,dy) : ImageData 物件左上角的坐標 //(dirtyX,dirtyY) : 可選，在畫布上放置影像的坐標 //(dirtyWidth,dirtyHeight) : 可選，在畫布上繪制影像所使用的寬度， object quadraticCurveTo(cpx, real cpy, real x, real y) : 創建二階貝塞爾曲線 object rect(x, real y, real w, real h) : 創建矩形，但它并不會真正將矩形畫出，只能呼叫stroke() 或 fill()后才會真正作用于畫布， object reset() : 將背景關系狀態和屬性重置為默認值， object resetTransform() ：將轉換矩陣重置為默認值（相當于呼叫setTransform(1, 0, 0, 1, 0, 0）),另請參考transform(), setTransform(), and reset().， object restore() : 恢復之前保存過的路徑狀態和屬性,防止save后對Canvas執行的操作對后續的繪制有影響 object rotate(angle) : 旋轉當前繪圖,angle以以弧度計,比如5度=5*Math.PI/180 object roundedRect(x, real y, real w, real h, real xRadius, real yRadius) : 創建圓角矩形 object save() : 保存當前環境的狀態,比如fillStyle、strokeStyle、font等,如果save后呼叫了beginPath()將會重置路徑,如果繪制線的話,需要再次moveTo()一次 object scale(x, real y) : 縮放或者放大接下來的繪圖,取值為浮點數,(1=100%, 0.5=50%, 2=200%, 依次類推) setLineDash(pattern) : 繪制虛線 object setTransform(a, real b, real c, real d, real e, real f) : 會呼叫resetTransform()重置變換矩陣后再次構建新的矩陣 a(水平縮放)、b(水平方向傾斜)、c(垂直方向傾斜)、d(垂直縮放)、e(水平移動)、f(垂直移動) object shear(sh, real sv) : 在水平方向上用sh,在垂直方向上用sv剪切轉換矩陣， object stroke() : 使用strokeStyle來繪制 moveTo() 和 lineTo() 等方法定義的路徑,類似于描邊 object strokeRect(x, real y, real w, real h) : 繪制矩形輪廓（無填充） object strokeText(text, x, y) : 繪制文本輪廓（無填充） object text(text, real x, real y) : 創建文本，但它并不會真正畫出，只能呼叫stroke() 或 fill()后才會真正作用于畫布， object transform(a, real b, real c, real d, real e, real f) : 和setTransform()不一樣,會在前一個變換矩陣上構建新的矩陣, object translate(x, real y) : 將當前(x,y)作為轉為開始位置
3.beginPath()和closePath()、save()和restore()
beginPath()和closePath()用來創建一個倍訓的路徑
save()和restore()用來實作保存當前狀態以及恢復當前狀態
需要注意的是:
- 如果save后呼叫beginPath()將會重置路徑,如果繪制線的話,需要再次moveTo()一次.
- stroke()和fill()都會以“上一次beginPath”之后的所有路徑為基礎進行繪制,所以繪制線的時候,必須呼叫一次beginPath()重置路徑一次.
示例如下所示:
Canvas { id: mycanvas width:300 height: 300 onPaint: { var ctx = getContext("2d") ctx.strokeStyle = "red" ctx.fillStyle = "yellow" ctx.save() // 將筆劃顏色保存起來 ctx.beginPath() ctx.strokeStyle = "blue" ctx.moveTo(50.5,50.5) // 呼叫beginPath()后,如果我們要繪制線條,則需要使用moveTo()來重新指定開始位置 ctx.lineTo(50.5,150.5) ctx.lineTo(150.5,150.5) ctx.closePath() // 關閉路徑,此時會創建從當前點(70,100)到開始點(50,50)的路徑 ctx.stroke() // 繪制路徑的顏色 ctx.fill() // 填充路徑內部顏色 ctx.restore() ctx.beginPath() ctx.moveTo(50.5,50.5) ctx.lineTo(150.5,50.5) ctx.stroke() } }
效果如下所示:
我們這里+0.5,是因為lineWidth默認為1,假如從(50,50)繪制到(150,50)的時候, 此時整個線寬的Y坐標應該是45.5px~55.5px,而像素點無法做到小于1px,所以會變成2px的模糊線條.
而如果坐標位置不一定是整數的時候,我們應該設定取整:
cxt.moveTo(parseInt(50)+0.5, parseInt(150)+0.5)
4.stroke()和fill()區別
區別在于stroke()是進行描邊(不填充內部顏色)、fill是進行填充內部顏色(路徑內部顏色)
我們以繪制文字為例，示例如下所示:
onPaint: { var ctx = getContext("2d") ctx.strokeStyle = "red" ctx.fillStyle = "red" ctx.font = "30px sans-serif" ctx.beginPath() ctx.text("hello stroke",20,40) ctx.stroke() ctx.beginPath() ctx.text("hello fill",20,140) ctx.fill() }
效果如下所示:
5. lineCap線帽樣式
取值有以下三種:
- butt - 線的兩端有垂直于線方向(默認值)
- round -線的兩端有直徑等于線寬的半圓
- square -線的兩端有個,長等于線寬，寬等于1/2線寬的矩形，
示例如下所示:
onPaint: { var ctx = getContext("2d") ctx.lineWidth = 10 ctx.strokeStyle = "red" ctx.lineCap = "butt" ctx.beginPath() ctx.moveTo(20,20) ctx.lineTo(200,20) ctx.stroke() ctx.strokeStyle = "green" ctx.lineCap = "round" ctx.beginPath() ctx.moveTo(20,60) ctx.lineTo(200,60) ctx.stroke() ctx.strokeStyle = "blue" ctx.lineCap = "square" ctx.beginPath() ctx.moveTo(20,100) ctx.lineTo(200,100) ctx.stroke() }
效果如下所示:
7. lineJoin拐角樣式
代碼很簡單,就不貼了,效果如下所示:
8. setLineDash繪制虛線
虛線相關的屬性和方法有: lineDashOffset 、getLineDash()、setLineDash(pattern)、
參考https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
我們設定虛線陣列時,需要注意的是:
陣列中元素個數是奇數的話，陣列會默認把組內元素復制一份,例如,[5,15,25]將變成[5,15,25,5,15,25]，
下標奇數的元素是繪制虛線的尺寸，下標偶數的元素是用來設定虛線之間的間距
示例如下所示:
onPaint: { var ctx = getContext("2d") ctx.lineDashOffset = 0; //設定虛線的偏移量(線不偏移,只是虛的位置偏移) ctx.setLineDash( [ 5, 15, 25] ); //實線部分和間隔部分依次是 [5,15,25,5,15,25] ctx.moveTo( 10, 10 ); ctx.lineTo( 310, 10 ); ctx.stroke(); }
效果如下所示:
而lineDashOffset則是設定虛線偏移值,值為正數時,會將虛線往左偏移,為負時,則往右偏移.
螞蟻線教程:
property int offset: 0 Canvas { id: canvas width:300 height: 300 onPaint: { var ctx = getContext("2d") ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash([4, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10,10, 100, 100); } } Timer { interval: 20 repeat: true running: true triggeredOnStart: true onTriggered: { offset++; if (offset > 16) { offset = 0; } canvas.requestPaint() } }
9.shadow陰影
shadow相當于一個物體的影子,context2D中關于shadow相關屬性有:
- shadowBlur : real,用于陰影的模糊距離，
- shadowColor : string,陰影顏色
- shadowOffsetX : qreal,陰影的水平偏移距離
- shadowOffsetY : qreal,陰影的垂直偏移距離
示例如下所示:
onPaint: { var ctx = getContext("2d") ctx.shadowBlur = 7 ctx.shadowColor = "black" ctx.fillStyle ="black" ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,70); ctx.lineTo(70,70); ctx.closePath(); ctx.rect(100,20,40,40); ctx.fill(); }
效果如下所示:
10. clip示例
比如我們從一個矩形中裁剪一個三角形出來,示例如下所示:
onPaint: { var ctx = getContext("2d") ctx.fillStyle = "red" ctx.beginPath(20,20) ctx.moveTo(20,20) ctx.lineTo(20,70) ctx.lineTo(70,70) ctx.closePath() ctx.clip() ctx.fillRect(20,20,100,100) }
11. createConicalGradient漸變示例
方法定義如下所示:
object createConicalGradient(x, real y, real angle) //回傳一個CanvasGradient圓錐漸變物件，該漸變圍繞中心點（x,y）逆時針插值顏色，起始角度以弧度為單位(0度對應3點鐘方向)
示例如下所示:
onPaint: { var ctx = getContext("2d") var grd=ctx.createConicalGradient(50,50,180 * Math.PI / 180); // 設定起點為9點方向 grd.addColorStop(0,"red"); grd.addColorStop(0.25,"green"); grd.addColorStop(0.5,"blue"); grd.addColorStop(0.75,"black"); grd.addColorStop(1.0,"red"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(0,0,50*2,50*2); } }
效果如下所示:
12. createRadialGradient漸變示例
方法如下所示:
object createRadialGradient(x0, real y0, real r0, real x1, real y1, real r1) //創建一個CanvasGradient半徑漸變物件.回傳一個內圓為(x0,y0)，半徑r0；外圓為(x1,y1)，半徑為r1的徑向漸變 // 需要注意的起點圓的顏色永遠都是起點0的顏色,而起點1的顏色,永遠是外圓最外的顏色
示例如下所示:
var ctx = getContext("2d") var grd=ctx.createRadialGradient(50,50,10,50,50,50); grd.addColorStop(0,"red"); grd.addColorStop(0.1,"blue"); grd.addColorStop(1.0,"green"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(0,0,50*2,50*2);
效果如下所示:
可以看到紅色部分的寬度為20,這是因為我們內圓的半徑恰好為10.
13. createPattern示例
createPattern()類似于調色板,用來實作重復繪制同一個資料,資料來源可以來自一張圖片,也可以是Qt::BrushStyle樣式的顏色.
如果是圖片的話,需要使用Canvas的loadImage()加載到畫布才能夠使用.
比如給一個路徑內部貼上圖片.
Canvas { id: mycanvas width:300 height: 300 onPaint: { var ctx = getContext("2d") var imge = ctx.createPattern("qrc:/wall", "repeat") ctx.fillStyle = imge ctx.beginPath() ctx.moveTo(200,30) ctx.lineTo(150,80) ctx.lineTo(150,130) ctx.lineTo(250,130) ctx.lineTo(250,80) ctx.closePath() ctx.fill() } Component.onCompleted: { mycanvas.loadImage("qrc:/wall") } onImageLoaded: { requestPaint() } }
14. CanvasImageData物件
CanvasImageData用來保存一塊區域或一幅圖片的像素資料,它的屬性有:
- data : object,是個一位元組的一維陣列，包含著RGBA格式的整型資料(按照紅，綠，藍和透明值的順序)，范圍在0至255之間（包括255），
- height : int,圖片高度
- width : int，圖片寬度
比如我們獲取指定的rowIndex、columnIndex的像素點rgba值時,可以這樣寫:
r = imageData.data[((rowIndex * (imageData.width * 4)) + (columnIndex * 4)) + 0]; g = imageData.data[((rowIndex * (imageData.width * 4)) + (columnIndex * 4)) + 1]; b = imageData.data[((rowIndex * (imageData.width * 4)) + (columnIndex * 4)) + 2]; a = imageData.data[((rowIndex * (imageData.width * 4)) + (columnIndex * 4)) + 3];
圖片灰度效果,示例如下所示:
Canvas { id: mycanvas width:300 height: 300 onPaint: { var ctx = getContext("2d") var ImageData = https://www.cnblogs.com/lifexy/p/ctx.createImageData("qrc:/wall") for (var i = 0; i < ImageData.data.length; i += 4) { var avg = (ImageData.data[i] + ImageData.data[i + 1] + ImageData.data[i + 2]) / 3; ImageData.data[i] = avg; // red ImageData.data[i + 1] = avg; // green ImageData.data[i + 2] = avg; // blue } var imge = ctx.createPattern(ImageData, "repeat") ctx.fillStyle = imge ctx.beginPath() ctx.moveTo(200,30) ctx.lineTo(150,80) ctx.lineTo(150,130) ctx.lineTo(250,130) ctx.lineTo(250,80) ctx.closePath() ctx.fill() } Component.onCompleted: { mycanvas.loadImage("qrc:/wall") } onImageLoaded: { requestPaint() } }
未完待續,下章我們來通過Canvas實作一個合成大西瓜游戲
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/285503.html
標籤：C++
上一篇：Qt 圓角按鈕，面版自動布局