Adding button effects to custom panel

Im using a circular avatar image stencil and im wanting to make it clickable. Im creating a button behind the avatar but the avatar image has no click function and blocks the button from being in use. I’ve tried to create my own OnMousePressed() function but i havent gotten one to work for me yet.

Here is the stencil code.

local function DrawCircle( x, y, radius, seg )
	local cir = {}
	table.insert( cir, { x = x, y = y } )
	for i = 0, seg do
		local a = math.rad( ( i / seg ) * -360 )
		table.insert( cir, { x = x + math.sin( a ) * radius, y = y + math.cos( a ) * radius } )
	local a = math.rad( 0 )
	table.insert( cir, { x = x + math.sin( a ) * radius, y = y + math.cos( a ) * radius } )
	surface.DrawPoly( cir )

local PANEL = {}

function PANEL:Init()
	self.avatar = vgui.Create( "AvatarImage", self )
	self.avatar:SetPaintedManually( true )

function PANEL:PerformLayout()
	self.avatar:SetSize( self:GetWide(), self:GetTall() )

function PANEL:SetPlayer( ply, size )
	self.avatar:SetPlayer( ply, size )

function PANEL:Paint( w, h )
	render.SetStencilEnable( true )

	render.SetStencilWriteMask( 1 )
	render.SetStencilTestMask( 1 )

	render.SetStencilFailOperation( STENCILOPERATION_REPLACE )
	render.SetStencilPassOperation( STENCILOPERATION_ZERO )
	render.SetStencilZFailOperation( STENCILOPERATION_ZERO )
	render.SetStencilCompareFunction( STENCILCOMPARISONFUNCTION_NEVER )
	render.SetStencilReferenceValue( 1 )

	surface.SetDrawColor( Color( 0, 0, 0, 255 ) )
	DrawCircle( w/2, h/2, h/2, math.max(w,h)/2 )

	render.SetStencilFailOperation( STENCILOPERATION_ZERO )
	render.SetStencilPassOperation( STENCILOPERATION_REPLACE )
	render.SetStencilZFailOperation( STENCILOPERATION_ZERO )
	render.SetStencilCompareFunction( STENCILCOMPARISONFUNCTION_EQUAL )
	render.SetStencilReferenceValue( 1 )


	render.SetStencilEnable( false )
vgui.Register( "CircularAvatar", PANEL )


That should make your OnMousePressed function work.

Im using MakePopup() which I’m told enables both mouse and keyboard input, but I’ll go ahead and take a try with that.

Make the invisible button ON TOP of the avatar image, not BELOW it.

Actually that wouldnt work for me since i dont have that in my panel.

Or just implement this method on your custom panel:

[editline]31st August 2016[/editline]

You can check out the Default code for DLabel and DButton here:

Duh, thanks Robotboy didn’t even think about that. Also is there a way to create a circular border I’m using surface.DrawOutlinedRect() for my main stuff but I haven’t seen a circular border code anywhere.

You have a “circular border code” in your code above. If you mean the “border” that the mouse can hit ( for a button ), the only way to achieve this would be by doing manual position checks when testing for clicks in the hook.