TV Digital com Ginga. NCLua Módulo Canvas

Tamanho: px

Começar a partir da página:

Download "TV Digital com Ginga. NCLua Módulo Canvas"

Ana Carolina Neiva Sacramento
8 Há anos
Visualizações:

1 NCLua Módulo Canvas

2 Módulo Canvas Um NCLua tem a possibilidade de fazer operações gráficas durante a apresentação de uma aplicação, tais como desenho de linhas, círculos, imagens, etc. Quando um NCLua é iniciado, automaticamente é instanciado um objeto gráfico que é atribuido à variável global canvas. Este objeto aponta para a região associada ao nó de mídia NCLua no documento NCL e é através dele que todas as operações gráficas são feitas.

Quando um NCLua é iniciado, automaticamente é instanciado um objeto gráfico que é atribuido à variável

3 Desenhando uma Linha com Canvas AppNCLua width, height = canvas:attrsize() -- pega as dimensões da região canvas:drawline(0,0, width,height) -- desenha uma linha cruzando o canvas canvas:flush() canvas.lua

4 canvas:attrsize() Retorna as dimensões do canvas. Retorna: width: [number] Largura do canvas. height: [number] Altura do canvas. Não é possível alterar as dimensões de um canvas instanciado, portanto para este método, apenas leitura é disponível.

5 canvas:drawline (x1, y1, x2, y2) Desenha uma linha com extremidades em (x1,y1) e (x2,y2). Utiliza a cor especificada em attrcolor. Recebe: x1: [number] Extremidade 1 da linha. y1: [number] Extremidade 1 da linha. x2: [number] Extremidade 2 da linha. y2: [number] Extremidade 2 da linha.

Recebe: x1: [number] Extremidade 1 da linha.

6 Escrevendo Textos com Canvas canvas:attrfont('vera', 20) canvas:attrcolor('red') canvas:drawtext(100, 100, "Hello World") canvas:flush() AppNCLua canvas.lua

7 canvas:attrfont (...) Acessa o atributo de fonte do canvas. Os valores de retorno (em caso de leitura) e argumentos (em caso de escrita), são: face: [string] Nome da fonte. size: [number] Tamanho da fonte. style: [string] Estilo da fonte. A assinatura do método para leitura é: canvas:attrfont () --> face, size, style A assinatura do método para escrita é: canvas:attrfont (face, size, style)

Nome da fonte. size: [number] Tamanho da fonte. style: [string] Estilo da fonte.

8 canvas:attrcolor (...) Acessa o atributo de cor do canvas. A assinatura do método para leitura é: canvas:attrcolor () --> R, G, B, A A assinatura do método para escrita é: canvas:attrcolor (R, G, B, A) Também é possível passar diretamente o nome da cor: canvas:attrcolor (color_name) color_name = 'white', 'aqua', 'lime', 'yellow', 'red', 'fuchsia', 'purple', 'maroon', 'blue', 'navy', 'teal', 'green', 'olive', 'silver', 'gray', 'black'

é: canvas:attrcolor (R, G, B, A) Também é possível passar diretamente o nome da cor: canvas:attrcolor

9 canvas:drawtext (x, y, text) Desenha o texto passado na posição (x,y) do canvas. Utiliza a cor especificada em attrcolor e fonte em attrfont. Recebe: x: [number] Coordenada x do texto. y: [number] Coordenada y do texto. text: [string] Texto a ser desenhado.

10 canvas:flush() Atualiza o canvas após operações de desenho e de composição. É suficiente chamá-la apenas uma vez após uma sequência de operações.

11 Construindo Imagens com Canvas local posimgvideox = 0 local posimgvideoy = 0 local img = canvas:new('media/fundo.png') AppNCLua local imgvideo = { img=img, x=posimgvideox, y=posimgvideoy, dx=dx, dy=dy } canvas:compose(imgvideo.x, imgvideo.y, imgvideo.img) canvas.lua

png') AppNCLua local imgvideo = { img=img, x=posimgvideox,

12 canvas:new (...) A partir do objeto canvas é possível criar novos objetos gráficos e combiná-los através de operações de composição. canvas:new (width, height) width: [number] Largura do canvas. height: [number] Altura do canvas. canvas:new (image_path) image_path: [string] Caminho da imagem.

13 canvas:compose (x, y, canvas_src) Faz a composição pixel a pixel entre dois canvas. O canvas passado como src é desenhado sobre o canvas em uso (canvas) na posição passada. Recebe: x: [number] Posição x da composição. y: [number] Posição y da composição. canvas_src: [canvas] Canvas a ser composto sobre canvas.

O canvas passado como src é desenhado sobre o canvas em uso (canvas) na

14 Aplicação T-Commerce com Canvas em Lua AppCanvas main.lua

15 Onde Estão os componentes? Não Existem! Mas...

17 Soluções

Documentos relacionados

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML