Jump to content

attach texture to dxDrawCircle


Recommended Posts

Hello, I ran into a problem with the dxDrawCircle function, I have a shader that allows you to apply a gradient to a texture, but the problem is that I need to make a gradient to a level system where there is a round strip with a gradient and I would like to attach a gradient there, but the problem is that dxDrawCircle does not accept a texture and I would like to somehow attach it there, or if possible, help me!

ocr

Link to comment

Hi,

If I understand you are trying to create a circle path with a gradient ?

I don't have an example to do it with DX functions and shaders but I figured out it's possible with SVG so I share it :

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FF0000" />
      <stop offset="95%" stop-color="#00FF00" />
    </linearGradient>
  </defs>
  
<path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
      
</svg>

You can check this example via simulator : https://www.svgviewer.dev/

I'm not sure I helped you.

Good evening

Link to comment
15 hours ago, Mkl said:

Hi,

If I understand you are trying to create a circle path with a gradient ?

I don't have an example to do it with DX functions and shaders but I figured out it's possible with SVG so I share it :

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FF0000" />
      <stop offset="95%" stop-color="#00FF00" />
    </linearGradient>
  </defs>
  
<path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
      
</svg>

You can check this example via simulator : https://www.svgviewer.dev/

I'm not sure I helped you.

Good evening

hello, I really liked your idea with the work of svg, is it possible to find out how to make the progress of reducing the strip in the svg code?

Link to comment

Like a percentage progress ? Yes it's possible. You have to update the SVG using svgGetDocumentXML and svgSetDocumentXML (check example on the wiki). I found a way to draw the circle regarding percentage progress with this function :

 

local function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end

source : https://stackoverflow.com/questions/5230148/create-svg-progress-circle

Link to comment
3 hours ago, Mkl said:

Like a percentage progress ? Yes it's possible. You have to update the SVG using svgGetDocumentXML and svgSetDocumentXML (check example on the wiki). I found a way to draw the circle regarding percentage progress with this function :

 

local function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end

source : https://stackoverflow.com/questions/5230148/create-svg-progress-circle

I tried to use this function, but unfortunately I didn't quite understand how to use it :(((
 

local rawSvgData = [[
    <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
    <defs>
      <linearGradient id="gradient">
        <stop offset="5%" stop-color="#FF0000" />
        <stop offset="95%" stop-color="#00FF00" />
      </linearGradient>
    </defs>
    
  <path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
        
  </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(500, 500, 430, 430, svg, 0, 0, 0, tocolor(255, 255, 255), false)
end

local function onUpdate(svg)
    print("fe")
    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

addEventHandler("onClientResourceStart", root, function()
    mySvg = svgCreate(430, 430, rawSvgData, onUpdate)
end)

bindKey("l", "down", function()
    local newPath = updateState(100, 100, 300);
    addSVGRectNode(mySvg, path)
end)


function addSVGRectNode(svg, path)
    local svgXML = svgGetDocumentXML(svg)
    
    local rect = xmlCreateChild(svgXML, "rect")

    xmlNodeSetAttribute(rect, "d", path)
    
    local status = svgSetDocumentXML(svg, svgXML)
    print(status)
end

function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end


The problem is that for some reason I can't change the source data of the svg file already (I tried to do as you said, well, for some reason it doesn't work) - besides, I didn't quite understand working with the arguments of this function, let's say I tried to manually call the function and replace the arguments the same as from the debug, but this it didn't work quite correctly, maybe I didn't quite understand the principle of these arguments of this function, what is responsible for what.
Please help me

Link to comment

It is  updateState(value, total, radius), like updateState(50, 100, 250) should give half a circle. It could be edited to remove radius param in our case.

This is the way I update the svg : 

local function setProgress(value)

    local svgXML = svgGetDocumentXML(mySvg) -- get xml 
    local path = xmlNodeGetChildren(svgXML, 1) -- get path node (second node, following first example I gave)

    xmlNodeSetAttribute(path, "d", updateState(value, 100, 250)) -- editing the attribute
    svgSetDocumentXML(mySvg, svgXML) -- saving

end

You could imagine a command to test it like :

local function startDemo()
    local value = 0
    setTimer(function()
        value = value + 1
        setProgress(value)
    end, 10, 100)
end
addCommandHandler("demo", startDemo)

A little animation 0 to 100 % of the circle progress.

  • Thanks 1
Link to comment
On 28/05/2022 at 01:07, Mkl said:

It is  updateState(value, total, radius), like updateState(50, 100, 250) should give half a circle. It could be edited to remove radius param in our case.

This is the way I update the svg : 

local function setProgress(value)

    local svgXML = svgGetDocumentXML(mySvg) -- get xml 
    local path = xmlNodeGetChildren(svgXML, 1) -- get path node (second node, following first example I gave)

    xmlNodeSetAttribute(path, "d", updateState(value, 100, 250)) -- editing the attribute
    svgSetDocumentXML(mySvg, svgXML) -- saving

end

You could imagine a command to test it like :

local function startDemo()
    local value = 0
    setTimer(function()
        value = value + 1
        setProgress(value)
    end, 10, 100)
end
addCommandHandler("demo", startDemo)

A little animation 0 to 100 % of the circle progress.

thank you very much ❤️

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...