PT-BR/svgCreate: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
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 chamada no documento SVG e na criação da textura, útil para saber quando o [[svg]] está pronto.
*'''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]].


'''IMPORTANTE''': Dependendo da sua implementação, o uso de uma função de callback será necessário para garantir que a textura SVG e o documento XML estejam prontos.
<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 diretório do arquivo fornecido no svgCreate
-- 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 svg
local svgs = {}


function init()
local function render(svg)
     -- Cria um círculo em SVG, usando os dados, usando os dados brutos XML acima.
     if (not isElement(svg)) or (getElementType(svg) ~= "svg") then
    svg = svgCreate(500, 500, rawSvgData, function(didLoad)
         removeEventHandler("onClientRender", root, svgs[svg].handler)
         if (not didLoad) then -- Se o SVG falhou em carregar, essa função não continuará.
        svgs[svg] = nil
            return
    end
        end


         addEventHandler("onClientRender", root, render)
    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 render()
-- Adiciona um nó reto ao SVG com cor, tamanho e posição aleatórios
     dxDrawImage(0, 0, 500, 500, svg, 0, 0, 0, tocolor(255, 255, 255), false)
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

Template:BR/Funcao cliente

Sticky-notes.png 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

Minimum server version n/a
Minimum client version 1.5.8-9.20979

Note: Using this feature requires the resource to have the above minimum version declared in the meta.xml <min_mta_version> section. e.g. <min_mta_version client="1.5.8-9.20979" />

Veja também