PT-BR/svgCreate: Difference between revisions
(Update usage & examples as per GitHub PR #2589) |
No edit summary |
||
Line 15: | Line 15: | ||
*'''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 retorno de chamada que é armazenada no SVG e disparada toda vez que a textura do SVG é atualizada (por exemplo, via [[svgSetDocumentXML]]). | *'''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 | Nota: Veja [[svgSetUpdateCallback]] para trabalhar com a função de retorno de chamada de um svg. | ||
===Retornos=== | ===Retornos=== |
Revision as of 21:33, 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 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