24.Qt Quick QML-Canvas和Context2D詳解

時間 2021-08-13

標籤 html canvas 數組框架異步 ide 函數 oop 學習字體欄目 HTML 简体版

原文原文鏈接

1.Canvas介紹
Canvas是一個容許繪製直線和曲線、簡單和複雜的形狀、圖形和引用的圖形圖像。它還能夠添加文本、顏色、陰影、漸變和圖案，並執行低級別像素操做。Canvas輸出能夠另存爲圖像文件或序列化到URL。
例如，如下代碼建立一個Canvas項目，該項目具備高度爲100像素、寬度爲200像素的繪圖區域：html

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經常使用屬性以下所示: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定時器和屏幕刷新時間點不一致,若是過快就致使過分繪製,增長開銷,過慢就致使動畫不流暢ide

接下來咱們主要仍是學習Context2D對象.函數

2.Context2D對象的屬性和方法oop

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。