NS 中的六边形图像视图

Question

我怎样才能创建一个像 NS 这样的组件？

如何给 ImageView 赋予六边形形状

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

Answer 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/