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 = 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實現一個合成大西瓜遊戲