六角形图像在NS中查看

问题描述：

我如何创建一个像这样的组件是NS？六角形图像在NS中查看

我想创建一个具有六边形的外观像一个组成部分，但我无法弄清楚如何才能获得这样的结果正确扩展nativescript类。

答

这是一个clip-path的完美案例，它是NativeScript支持的CSS属性！

查看：

<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%); 
}

或者您可以直接在这个例子套用到图像，如：

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

你可以调整的外观与这个惊人的工具六角形：http://bennettfeely.com/clippy/

非常感谢Eddy！ –

将它应用于'Image'是首选，因为Android在内存中处理图像的方式非常差，并且如果您打算将这个六边形图像用于大量图像，您将看到OOM例外。对于这些情况，“图像”在{N}中进行了优化。 –

六角形图像在NS中查看

相关推荐