PT-BR/svgCreate: Difference between revisions
No edit summary |
(Update usage & examples as per GitHub PR #2589) |
||
Line 14: | Line 14: | ||
{{OptionalArg}} | {{OptionalArg}} | ||
*'''pathOrRawData:''' Uma [[string]] representando o caminho para seu arquivo SVG, ou dados brutos SVG. | *'''pathOrRawData:''' Uma [[string]] representando o caminho para seu arquivo SVG, ou dados brutos SVG. | ||
*'''callback:''' Uma função de | *'''callback:''' Uma função de retorno de chamada que é armazenada no SVG e disparada toda vez que a textura do SVG é atualizada (por exemplo, via [[svgSetDocumentXML]]). | ||
Nota: Veja [[svgSetUpdateCallback]] e [[svgGetUpdateCallback]] para trabalhar com a função de retorno de chamada de um svg. | |||
===Retornos=== | ===Retornos=== | ||
Line 22: | Line 23: | ||
O exemplo abaixo mostra como você pode carregar um SVG por dados brutos (ou arquivo) e desenhá-lo com [[dxDrawImage]] via [[onClientRender]]. | O exemplo abaixo mostra como você pode carregar um SVG por dados brutos (ou arquivo) e desenhá-lo com [[dxDrawImage]] via [[onClientRender]]. | ||
<syntaxhighlight lang="lua"> | |||
-- Isso também pode ser um arquivo, com o diretório do arquivo fornecido no svgCreate | |||
local rawSvgData = [[ | |||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> | |||
<circle cx="250" cy="250" r="250" fill="#0fc0fc" /> | |||
</svg> | |||
]] | |||
local myCircleSvg | |||
local function drawCircleSvg() | |||
dxDrawImage(0, 0, 500, 500, myCircleSvg, 0, 0, 0, tocolor(255, 255, 255), false) | |||
end | |||
local function init() | |||
-- Cria um SVG contendo um círculo, usando os dados XML brutos acima | |||
myCircleSvg = svgCreate(500, 500, rawSvgData) | |||
addEventHandler("onClientRender", root, drawCircleSvg) | |||
end | |||
addEventHandler("onClientResourceStart", resourceRoot, init) | |||
</syntaxhighlight> | |||
Aqui está outro exemplo mais aprofundado que utiliza o argumento de retorno de chamada. Você pode usar a tecla F2 para definir o SVG para um tamanho aleatório e ver o retorno de chamada de atualização gerar uma mensagem no debugscript. | |||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
-- Isso também pode ser um arquivo, com o | -- Isso também pode ser um arquivo, com o caminho fornecido para svgCreate | ||
local rawSvgData = [[ | local rawSvgData = [[ | ||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> | <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> | ||
Line 32: | Line 55: | ||
]] | ]] | ||
local | local svgs = {} | ||
function | local function render(svg) | ||
if (not isElement(svg)) or (getElementType(svg) ~= "svg") then | |||
removeEventHandler("onClientRender", root, svgs[svg].handler) | |||
svgs[svg] = nil | |||
end | |||
addEventHandler("onClientRender", root, | local width, height = svgGetSize(svg) | ||
dxDrawImage(0, 0, width, height, svg, 0, 0, 0, tocolor(255, 255, 255), false) | |||
end | |||
local function onUpdate(svg) | |||
-- Se esta for a primeira atualização, adicione svg à nossa tabela e comece a desenhá-la | |||
if (not svgs[svg]) then | |||
svgs[svg] = { | |||
state = true, | |||
handler = function() | |||
render(svg) | |||
end | |||
} | |||
addEventHandler("onClientRender", root, svgs[svg].handler) | |||
end | |||
iprint("Textura SVG atualizada.", svg, getTickCount()) | |||
end | |||
local function init() | |||
-- Cria um SVG contendo um círculo, usando os dados XML brutos acima | |||
local mySvg = svgCreate(500, 500, rawSvgData, onUpdate) | |||
-- Vincule uma chave para criar um nó filho SVG rect, que acionará o retorno de chamada onUpdate | |||
bindKey("F2", "down", function() | |||
addSVGRectNode(mySvg) | |||
end) | end) | ||
end | end | ||
addEventHandler("onClientResourceStart", resourceRoot, init) | addEventHandler("onClientResourceStart", resourceRoot, init) | ||
function | -- Adiciona um nó reto ao SVG com cor, tamanho e posição aleatórios | ||
function addSVGRectNode(svg) | |||
-- Obter o documento XML do nosso SVG | |||
local svgXML = svgGetDocumentXML(svg) | |||
-- Adicione um nó SVG reto, posicionado no centro do documento | |||
local rect = xmlCreateChild(svgXML, "rect") | |||
local size = math.random(0, 50) | |||
local r, g, b = math.random(10, 99), math.random(10, 99), math.random(10, 99) | |||
xmlNodeSetAttribute(rect, "x", (size / 2) .. "%") | |||
xmlNodeSetAttribute(rect, "y", (size / 2) .. "%") | |||
xmlNodeSetAttribute(rect, "width", size .. "%") | |||
xmlNodeSetAttribute(rect, "height", size .. "%") | |||
xmlNodeSetAttribute(rect, "fill", "#" .. r .. g .. b) | |||
-- Aplique nosso XML ao SVG e comece a desenhar via callback | |||
svgSetDocumentXML(svg, svgXML) | |||
end | end | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==Requirements== | ==Requirements== |
Revision as of 01:43, 9 April 2022
Nota Importante: NÃO use svgCreate dentro do evento onClientRender pode ocasionar crash em seu servidor. | |
Cria um svg com um tamanho (documento em branco), por um caminho de arquivo ou dados brutos.
Sintaxe
svg svgCreate ( int width, int height [, string pathOrRawData, function callback ( bool didLoad ) ] )
Argumentos Necessários
- width Largura, de preferência em potência de dois (16, 32, 64 etc.), o máximo é 4096.
- height Altura, de preferência em potência de dois (16, 32, 64 etc.), o máximo é 4096.
Argumentos Opcionais
NOTE: When using optional arguments, you might need to supply all arguments before the one you wish to use. For more information on optional arguments, see optional arguments.
- pathOrRawData: Uma string representando o caminho para seu arquivo SVG, ou dados brutos SVG.
- callback: Uma função de retorno de chamada que é armazenada no SVG e disparada toda vez que a textura do SVG é atualizada (por exemplo, via svgSetDocumentXML).
Nota: Veja svgSetUpdateCallback e svgGetUpdateCallback para trabalhar com a função de retorno de chamada de um svg.
Retornos
- Retorna um svg se criado com sucesso, false caso dê errado.
Exemplo
O exemplo abaixo mostra como você pode carregar um SVG por dados brutos (ou arquivo) e desenhá-lo com dxDrawImage via onClientRender.
-- Isso também pode ser um arquivo, com o diretório do arquivo fornecido no svgCreate local rawSvgData = [[ <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <circle cx="250" cy="250" r="250" fill="#0fc0fc" /> </svg> ]] local myCircleSvg local function drawCircleSvg() dxDrawImage(0, 0, 500, 500, myCircleSvg, 0, 0, 0, tocolor(255, 255, 255), false) end local function init() -- Cria um SVG contendo um círculo, usando os dados XML brutos acima myCircleSvg = svgCreate(500, 500, rawSvgData) addEventHandler("onClientRender", root, drawCircleSvg) end addEventHandler("onClientResourceStart", resourceRoot, init)
Aqui está outro exemplo mais aprofundado que utiliza o argumento de retorno de chamada. Você pode usar a tecla F2 para definir o SVG para um tamanho aleatório e ver o retorno de chamada de atualização gerar uma mensagem no debugscript.
-- Isso também pode ser um arquivo, com o caminho fornecido para svgCreate local rawSvgData = [[ <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <circle cx="250" cy="250" r="250" fill="#0fc0fc" /> </svg> ]] local svgs = {} local function render(svg) if (not isElement(svg)) or (getElementType(svg) ~= "svg") then removeEventHandler("onClientRender", root, svgs[svg].handler) svgs[svg] = nil end local width, height = svgGetSize(svg) dxDrawImage(0, 0, width, height, svg, 0, 0, 0, tocolor(255, 255, 255), false) end local function onUpdate(svg) -- Se esta for a primeira atualização, adicione svg à nossa tabela e comece a desenhá-la if (not svgs[svg]) then svgs[svg] = { state = true, handler = function() render(svg) end } addEventHandler("onClientRender", root, svgs[svg].handler) end iprint("Textura SVG atualizada.", svg, getTickCount()) end local function init() -- Cria um SVG contendo um círculo, usando os dados XML brutos acima local mySvg = svgCreate(500, 500, rawSvgData, onUpdate) -- Vincule uma chave para criar um nó filho SVG rect, que acionará o retorno de chamada onUpdate bindKey("F2", "down", function() addSVGRectNode(mySvg) end) end addEventHandler("onClientResourceStart", resourceRoot, init) -- Adiciona um nó reto ao SVG com cor, tamanho e posição aleatórios function addSVGRectNode(svg) -- Obter o documento XML do nosso SVG local svgXML = svgGetDocumentXML(svg) -- Adicione um nó SVG reto, posicionado no centro do documento local rect = xmlCreateChild(svgXML, "rect") local size = math.random(0, 50) local r, g, b = math.random(10, 99), math.random(10, 99), math.random(10, 99) xmlNodeSetAttribute(rect, "x", (size / 2) .. "%") xmlNodeSetAttribute(rect, "y", (size / 2) .. "%") xmlNodeSetAttribute(rect, "width", size .. "%") xmlNodeSetAttribute(rect, "height", size .. "%") xmlNodeSetAttribute(rect, "fill", "#" .. r .. g .. b) -- Aplique nosso XML ao SVG e comece a desenhar via callback svgSetDocumentXML(svg, svgXML) end
Requirements
This template will be deleted.
Veja também