Circle is getting blurred when I increased the size

I created a circle with dimension 50 by 50 and given the action
on click
set the size to
150 by 150.

But it is getting blurred when size is increased. Why it is getting blurred if it is vector shape.

Thanks
Neer.
circle-getting-blurred.rp (45.6 KB)

Hi
I got the solution here. I solved this issue.

Thanks

Axure generates a lot of images when rendering a webpage. Circles are one of them. To fix it, draw the circle large, then shrink it down OnLoad. This forces Axure to create a better circle image.

For example:
circle-getting-blurred.rp (47.6 KB)

Hi! Another option is SVG.

Axure now has some support for SVG. It seems odd, but you can simply copy the svg code below, go to Axure, and paste it right into you canvas. Instead of pasting the code, it will paste an SVG circle.

<svg width="202px" height="202px" viewBox="0 0 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle stroke="#4A4A4A" fill="#FFFFFF" stroke-width="1" cx="101" cy="101" r="100" fill-rule="evenodd" vector-effect="non-scaling-stroke"></circle>
</svg>

Notes:

  • You can’t change the color of the circle after you paste it, so change the stroke and fill color in the SVG code itself.
  • You don’t need change any of the sizing code, like width and height or viewbox size. Instead, size it once you’ve pasted it.
  • You’ll want to change stroke-width in the code, though, as you won’t be able to edit that in Axure. If you do change stroke-width to greater than 1, reduce the radius size - the “r” property - by half of the thickness. So for stroke-width=“10” in the code above, you’d set r = “95” instead of r=“100”. Otherwise the border will be cropped by the viewbox.
  • If you want the border width to get thicker or thinner when you size the circle up or down (it will be crisp regardless), change the value of the property vector-effects to “default” (or remove the property altogether).
  • It may not look that hot when you are authoring in Axure, but when you run the prototype, it will look clean.

Demo: https://26tnd2.axshare.com/#c=2
RP File: circle-getting-blurred.rp (48.5 KB)

yes… it is working perfectly now.

Thanks

Hi - maybe the easiest work around (at least for me: Don’t use a circle element, but us a box instead. Set the corner radius to max (150), make the box ‘square’ and voilà: The perfect ciclre. Axure renders this as a vector and does not convert the element into a bitmap.

Cheers, Jens

Yes. This is also working. not getting blurred.
Thanks

The box is a div with a styled border. The border width will remain constant.