0

How can i create a component like this is NS?

How to give hexagon shape to ImageView

I want to create a image component that has a hexagon look, but i cant figure it out how to extend nativescript classes correctly in order to obtain this result.

Leonardo Ferreira
  • 67
  • 6

1 Answers1

5

This is a perfect case for clip-path, which is a CSS property that NativeScript supports out of the box!

View:

  <ContentView width="150" height="150" class="someimage hexagon"></ContentView>

CSS:

.someimage {
  background-image: url("~/assets/images/myimage.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Or you can apply it directly to an image, like in this example:

<Image src="~/assets/images/myimage.jpg" class="hexagon"></Image>

You can tweak the appearance of the hexagon with this amazing tool: http://bennettfeely.com/clippy/

Eddy Verbruggen
  • 3,550
  • 1
  • 15
  • 27
  • Applying it to the `Image` is preferred because Android has very poor way of handling Images in the memory and if your intent to use this hexagon image for a lot of images you will see find yourself with OOM exceptions. The `Image` is optimized in {N} for those cases. – Vladimir Amiorkov May 24 '17 at 08:44