Open WonderDev21 opened 7 years ago
Hi @heraclesdev,
I have tested your case with setting clip-path
on an image and have to confirm that this CSS option will not be applied correctly to an Image. I was able to reproduce this behavior only on Android.
Test project demonstrating the issue can be found in the attached project. Archive.zip
First of all in the current implementation the clip path is applied in android only when a background or border is set (background image, gradient, colour or border width): https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java#L315 https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java#L351 https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java#L381 https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java#L391
The issue can be resolved by setting the Paint#setXfermode()
to new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
. This has the effect that the BitmapShader
draws only on those pixels that have been drawn before in the background.draw(canvas)
.
In my test that worked only after setting the layer type to hardware: setLayerType(LAYER_TYPE_HARDWARE, paint)
and having a background colour set to something non-transparent. Also the combination with borders doesn't work well.
https://gist.github.com/Buuhuu/4a5c5f9ea872caab45bb992686ddcb2c
Due to that I cannot provide a PR here but maybe my idea helps to resolve the issue?
I tried to change top and bottom border-radius of image but I failed. .image{ width:100; height:100; clip-path: polygon(100% 23%, 96% 18%, 94% 15%, 89% 10%, 84% 6%, 79% 3%, 73% 0%, 0% 0%, 0% 100%, 100% 100%); }
could you explain to solve this problem?