SvgSetSize: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
(Initial page creation)
 
(Update usage & examples as per GitHub PR #2589)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Client function}}
{{Client function}}
{{Added feature/item|1.5.9|1.5.8|20979|Sets the underlying XML document from an SVG element.}}
{{Added feature/item|1.5.9|1.5.8|20979|Sets the underlying XML document from an SVG element.}}
{{Important Note|Before r21155 ([https://github.com/multitheftauto/mtasa-blue/commit/31579051cc046bc5cb55c59fc4e9e70ec1bdce34 3157905]) the provided callback wasn't stored on the SVG and was only fired '''once''' after the function had performed its task. This is no longer the case - each SVG can now store a single callback function (optional) which is fired '''every time''' the SVG texture has been changed/updated. }}
==Syntax==  
==Syntax==  
<syntaxhighlight lang="lua">bool svgSetSize( svg svgElement, int width, int height [, function callback ( bool didLoad ) ] )</syntaxhighlight>
<syntaxhighlight lang="lua">bool svgSetSize( svg svgElement, int width, int height [, function callback ( element svg ) ] )</syntaxhighlight>


===Required Arguments===
===Required Arguments===
Line 11: Line 14:
===Optional Arguments===
===Optional Arguments===
{{OptionalArg}}
{{OptionalArg}}
*'''callback:''' A callback function which is invoked upon SVG document and texture creation (after resizing), useful for knowing when the SVG element is ready
*'''callback:''' A callback function which is stored on the SVG and fired every time the SVG texture is updated (for example, via [[svgSetDocumentXML]]). '''Note''': if present, this will overwrite the current callback stored on the svg


===Returns===
===Returns===
Line 17: Line 20:


==Example==
==Example==
This example creates an [[svg]] element (with callbacks to initialize drawing) including a keybind to resize the [[svg]] randomly (see bindKey).
This example creates an [[svg]] element including a keybind (F2) to resize the SVG randomly, with the use of callbacks to notify in debugscript when the SVG was updated.
 
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
-- This could also be a file, with the path provided to svgCreate
-- This could also be a file, with the path provided to svgCreate instead
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 26: Line 30:
]]
]]


local svg
local svgs = {}


function init()
local function render(svg)
     -- Create an SVG containing a circle, using the raw XML data above
     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 -- SVG failed to load, so don't continue
        svgs[svg] = nil
            return
    end
        end


        onSvgLoad(svg)
    local width, height = svgGetSize(svg)
     end)
     dxDrawImage(0, 0, width, height, svg, 0, 0, 0, tocolor(255, 255, 255), false)
end
end
addEventHandler("onClientResourceStart", resourceRoot, init)


local function onUpdate(svg)
    -- If this is the first update, add svg to our table and start drawing it
    if (not svgs[svg]) then
        svgs[svg] = {
            state = true,
            handler = function()
                render(svg)
            end
        }
        addEventHandler("onClientRender", root, svgs[svg].handler)
    end


-- Implement a callback for SVG load
     iprint("SVG texture updated", svg, getTickCount())
function onSvgLoad(svg)
     addEventHandler("onClientRender", root, render)
end
end


function render()
local function init()
     local width, height = svgGetSize(svg)
     -- Create an SVG containing a circle, using the raw XML data above
     dxDrawImage(0, 0, width, height, svg, 0, 0, 0, tocolor(255, 255, 255), false)
     local mySvg = svgCreate(500, 500, rawSvgData, onUpdate)
 
    -- Bind a key to set SVG to a random size, which will trigger the onUpdate callback
    bindKey("F2", "down", function()
        setRandomSVGSize(mySvg)
    end)
end
end
addEventHandler("onClientResourceStart", resourceRoot, init)


-- Add a keybind which sets the SVG to a random size
function setRandomSVGSize(svg)
bindKey("r", "down", function()
     local width, height = svgGetSize(svg)
     if (not isElement(svg)) or (getElementType(svg) ~= "svg") then
    local diff = math.min(width, height) /  math.max(width, height)
        return false
    local size = math.random(100, 500)
    end


    local size = math.random(100, 500)
     svgSetSize(svg, size, size * diff)
     svgSetSize(svg, size, size)
end
end)
</syntaxhighlight>
</syntaxhighlight>


Line 67: Line 83:
==See Also==
==See Also==
{{SVG_functions}}
{{SVG_functions}}
[[pt-br:svgSetSize]]

Latest revision as of 23:09, 8 April 2022

Sets the underlying XML document from an SVG element.


[[{{{image}}}|link=|]] Important Note: Before r21155 (3157905) the provided callback wasn't stored on the SVG and was only fired once after the function had performed its task. This is no longer the case - each SVG can now store a single callback function (optional) which is fired every time the SVG texture has been changed/updated.

Syntax

bool svgSetSize( svg svgElement, int width, int height [, function callback ( element svg ) ] )

Required Arguments

  • svgElement: The svg element you want to set the size of.
  • width: Desired width, preferably power of two (16, 32, 64 etc.), maximum is 4096
  • height : Desired height, preferably power of two (16, 32, 64 etc.), maximum is 4096

Optional Arguments

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.

  • callback: A callback function which is stored on the SVG and fired every time the SVG texture is updated (for example, via svgSetDocumentXML). Note: if present, this will overwrite the current callback stored on the svg

Returns

  • Returns true if successful, false otherwise

Example

This example creates an svg element including a keybind (F2) to resize the SVG randomly, with the use of callbacks to notify in debugscript when the SVG was updated.

-- This could also be a file, with the path provided to svgCreate instead
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)
    -- If this is the first update, add svg to our table and start drawing it
    if (not svgs[svg]) then
        svgs[svg] = {
            state = true,
            handler = function()
                render(svg)
            end
        }

        addEventHandler("onClientRender", root, svgs[svg].handler)
    end

    iprint("SVG texture updated", svg, getTickCount())
end

local function init()
    -- Create an SVG containing a circle, using the raw XML data above
    local mySvg = svgCreate(500, 500, rawSvgData, onUpdate)

    -- Bind a key to set SVG to a random size, which will trigger the onUpdate callback
    bindKey("F2", "down", function()
        setRandomSVGSize(mySvg)
    end)
end
addEventHandler("onClientResourceStart", resourceRoot, init)

function setRandomSVGSize(svg)
    local width, height = svgGetSize(svg)
    local diff = math.min(width, height) /  math.max(width, height)
    local size = math.random(100, 500)

    svgSetSize(svg, size, size * diff)
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" />

See Also