NS 中的六边形图像视图答案

【问题标题】：Hexagon Image View in NSNS 中的六边形图像视图
【发布时间】：2017-05-23 13:56:19
【问题描述】：

如何创建像这样的组件是 NS？

How to give hexagon shape to ImageView

我想创建一个具有六边形外观的图像组件，但我不知道如何正确扩展 nativescript 类以获得此结果。

【问题讨论】：

标签： android image nativescript

【解决方案1】：

这是 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/

【讨论】：

首选将其应用于Image，因为Android在内存中处理图像的方式非常糟糕，如果您打算将此六边形图像用于大量图像，您会发现自己使用OOM例外。 Image 在 {N} 中针对这些情况进行了优化。