Question

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

我想创建一个具有六边形外观的图像组件，但我无法弄清楚如何正确扩展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/

NS中的Hexagon图像视图

1 个答案: