radius issue

[bzaruk]

Hi,

I am on something very strange: I am drawing an circle picture (avatar) and I want to add a shadow to it. My circle picture is a custom component that gets the radius of the picture and creates the rounded picture by setting the height and width double time the radius I pass...For example:

<rounded-picture [profilePictureUrl]="profilePicture"
                                pictureRadius="40">
</rounded-picture>

custom component HTML:

<StackLayout>
    <Image #image class="full-stretch" backgroundColor="#f2f2f2" [width]="pictureRadius*2" [height]="pictureRadius*2" [borderRadius]="pictureRadius" [borderWidth]="borderWidth" [borderColor]="borderColor" (tap)="onTap()" stretch="fill" [src]="source"></Image>
</StackLayout>

as you can see the width and height are double time the borderRadius to create the circle shape

So I thought that the radius parameter of the CardView got the have the same but it is actually have to be much bigger and without relation to the radius of the shape.

for example in my example I have to set the radius of the CardView to 120 (triple time value). And when I set my rounded-picture component to have a radius value of 30, I thought the I should set the CardView to 90, but actually it isn't go well, and I didn't find the right value without making it look bad.

Any idea why?

Thank you! :)

[bzaruk]

@bradmartin Ok I had a little mistake...it looks like the value need to be 3 times the actual picture radius...But I wonder why is that? why can it get the actual value?

[bradmartin]

Not sure without debugging it 😄 - looks like you use angular. In that case here is something that might be a better approach for what you need. https://github.com/Especializa/nativescript-ng-shadow

[bzaruk]

@bradmartin - Thanks a lot! I will give it a try!