Resize a display object without increasing stroke width

If I create a circle with display.newCircle, give it a stroke width and either scale it or set its width and height, the stroke width changes. Is there a way to resize an object without changing its stroke width in the process?

The reason I want this effect is because I want to resize the circle every frame, so I can’t just use two separate display objects.

For reference I want the resize effect to look like this, the smaller one is the original and the larger one would be the resized one:

Screen Shot 2022-10-09 at 6.45.30 pm

You can do this to an extent by just offsetting the stroke width after having scaled the object, e.g.

local strokeWidth = 2

local circle = display.newCircle( display.contentCenterX, display.contentCenterY, 30 )
circle.strokeWidth = strokeWidth

Runtime:addEventListener( "enterFrame", function()
	circle.xScale, circle.yScale = circle.xScale + 0.1, circle.yScale + 0.1
	circle.strokeWidth = math.max( 1, strokeWidth / circle.xScale )
end )

However, as you’ll notice, the pre-scaled stroke width cannot be less than 1, which means there’s a limit to how far you can take this.

1 Like