canvas̳

[ Qt ѧϰ֮· 2 ]

ֺ+ ߣH5֮ ԴH5֮ 2017-03-21 12:02 Ҫ( )

Qt һ C++ Ӧóܡ㲢˵ֻһ GUI ⣬Ϊ Qt ʮӴ󣬲 GUI ʹ Qtһ̶õһһվʽ

A A

Ĭ ҹ

88Canvas

QML ոձ뵽 Qt 4 Ƕʱ䣬 Qt Quick DzҪһԲɴˣ뵽DzǻҪ״ûû˵뵼һֱӵĽԲǾΣQt Quick ʲôûṩԲҪһԲǾҸͼƬ߸ɴԼ C++ дһɣ Qt Quick ǿչģô

ΪʹýűĻͼƣQt 5 CanvasԪءCanvasԪṩһֱ޹صλͼƻơͨCanvasʹ JavaScript лơϤ HTML5 ĻQt Quick CanvasԪ HTML5 еCanvasԪһޡ

CanvasԪصĻ˼ǣʹһ 2D ĶȾ· 2D ĶĻƺӶʹCanvasԪؿһ塣ֻ֧ʡ䡢䡢ıԼһϵ·

ǿһ򵥵·Ƶӣ

import QtQuick 2.0 Canvas { id: root // С width: 200; height: 200 // дƺ onPaint: { // 2D Ķ var ctx = getContext("2d") // û ctx.lineWidth = 4 ctx.strokeStyle = "blue" // ctx.fillStyle = "steelblue" // ʼ· ctx.beginPath() // ƶϵΪʼ ctx.moveTo(50,50) // ϱ ctx.lineTo(150,50) // ұ ctx.lineTo(150,150) // ױ ctx.lineTo(50,150) // ߣ· ctx.closePath() // ʹ· ctx.fill() // ʹûʻƱ ctx.stroke() } }

Ĵ뽫ϽΪ (50, 50) һͿΪ 100 صľΡʹø䣬Ҿɫ߿򡣳нʾ

Canvas

ϸδ롣ȣʵĿΪ 4 أʹstrokeStyleԣʵɫΪɫfillStyleɫΪ steelblueֻеstroke()fill()ʱʵĻƲŻִСȻҲȫԶʹһ𡣵stroke()fill()ζŽǰ·ƳҪעǣ·Dzܹõģֻеǰ״̬ܹáνǰ״ָ̬ǵǰĻɫȡɫԡ

QML УCanvasԪؾһֻƵ2D ĶΪʵʻƵִߡƹ̱onPaint¼ɡ漴һܣ

Canvas { width: 200; height: 200 onPaint: { var ctx = getContext("2d") // û // ʼ } }

Canvasṩһ͵ĶάϵԭϽǣX ңY ¡ʹCanvasлƵĵ͹ǣ

ûʺʽ
·
Ӧûʺ

onPaint: { var ctx = getContext("2d") // û ctx.strokeStyle = "red" // · ctx.beginPath() ctx.moveTo(50,50) ctx.lineTo(150,50) // ctx.stroke() }

δнӦһ (50, 50) ʼ (150, 50) һɫ߶Ρ

ڴ·֮ǰὫʷʼλãˣڵbeginPath()֮ĵһmoveTo()

״ API

Լ·Ĵ֮⣬Canvasṩһϵзʹõĺһһεȣ磺

import QtQuick 2.0 Canvas { id: root width: 120; height: 120 onPaint: { var ctx = getContext("2d") ctx.fillStyle = 'green' ctx.strokeStyle = "blue" ctx.lineWidth = 4 // ctx.fillRect(20, 20, 80, 80) // üڲ ctx.clearRect(30,30, 60, 60) // Ͻ𣬵Ļһ߿ ctx.strokeRect(20,20, 40, 40) } }

н£
canvas rectangle
עɫ߿λáڻƱ߿ʱʻ·лơ 4 ر߿ĵΪ·˻ 2 ·࣬2 ·ڲࡣ

CanvasԪؿʹɫ䣬ͬҲʹý䡣Ĵ룺

onPaint: { var ctx = getContext("2d") var gradient = ctx.createLinearGradient(100,0,100,200) gradient.addColorStop(0, "blue") gradient.addColorStop(0.5, "lightsteelblue") ctx.fillStyle = gradient ctx.fillRect(50,50,100,100) }

нʾ
canvas
Уʼλ (100, 0)ֹλ (100, 200)עλãʵʴһλڻλõֱߡڲֵ [0.0, 1.0] ڲһõȷɫУ0.0 ζŽʼ㣬1.0 ζŽֹ㡣У 0.0 λãҲǽʼ (100, 0) λãɫΪblue 1.0 λãҲǽֹ (100, 200) λãɫΪlightsteelblueע⣬ķΧԴʵʻƵľΣʱƳľʵϲü˽һ֡ˣĶʵݻ꣬ҲǶĻ·ꡣ

Ӱ

·ʹӰǿӾǿ԰ӰΪһΧ·ΧһƫơһɫģЧǿʹshadowColorԶӰɫʹshadowOffsetXԶӰ X ᷽ƫʹshadowOffsetYԶӰ Y ᷽ƫʹshadowBlurԶӰģij̶ȡӰЧҲʵһΧ·ܱߵķЧУǽһзЧıΪ˸ԵʾЧ䱳潫ɫġӦĴ룺

import QtQuick 2.0 Canvas { id: root width: 280; height: 120 onPaint: { var ctx = getContext("2d") // ctx.strokeStyle = "#333" ctx.fillRect(0, 0, root.width, root.height); // Ӱ ctx.shadowColor = "blue"; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 10; // 岢 ctx.font = 'bold 80px sans-serif'; ctx.fillStyle = "#33a9ff"; ctx.fillText("Earth", 30, 80); } }

1.վѭҵ淶κתصĸȷעߺԴ2.վԭ£תʱעߺԴԭΪǽ׷Σ3.ͶܻᾭDZ༭޸Ļ򲹳䡣

  • AR+MOOCѧϰ龳AR ѧ

    AR+MOOCѧϰ龳AR ѧ

    2017-03-21 13:00

  • Android ԶViewѧϰ()

    Android ԶViewѧϰ()

    2017-03-21 11:02

  • Silverlight/WPF/Windows Phone/HTML5һѧϰ(213

    Silverlight/WPF/Windows Phone/HTML5һѧϰ(213

    2017-03-20 12:01

  • HTML5̳̻Canvas֪ʶ⣬html5ѧϰ

    HTML5̳̻Canvas֪ʶ⣬html5ѧϰ

    2017-03-14 09:01

ѵ