1

我正在尝试使用此处找到的 Nativescript 样式剪辑路径。我的代码

#container {
   background-color:black;
   width:400;
   height: 250;
   background-image:url("~/testImages/test1.jpg");
   background-repeat: no-repeat;
   background-size: cover; 
   -webkit-clip-path: inset(50pt 150pt 150pt 10pt);
   clip-path: inset(50pt 150pt 150pt 10pt);

   /* 
        inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
   */
}

我的观点

<AbsoluteLayout id="container" ></AbsoluteLayout>

我确实看到了背景图像和我应用的所有其他样式，但我无法让它剪裁路径。

我也试过

-webkit-clip-path: inset(50 150 150 10);
clip-path: inset(50 150 150 10);

和

-webkit-clip-path: inset(50% 150% 150% 10%);
clip-path: inset(50% 150% 150% 10%);

和

-webkit-clip-path: inset(50px 150px 150px 10px);
clip-path: inset(50px 150px 150px 10px);

我的 package.json 文件

{
  "name": "NativeAppTest",
  "version": "1.0.0",
  "description": "native app test",
  "nativescript": {
    "id": "com.test.native",
    "tns-ios": {
      "version": "2.1.1"
    },
    "tns-android": {
      "version": "2.2.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "email-validator": "1.0.4",
    "font-awesome": "^4.6.3",
    "nativescript-angular": "^0.3.0",
    "nativescript-social-share": "1.2.0",
    "nativescript-unit-test-runner": "^0.3.3",
    "tns-core-modules": "^2.2.0"
  },
  "devDependencies": {
    "babel-traverse": "6.8.0",
    "babel-types": "6.8.1",
    "babylon": "6.8.0",
    "filewalker": "0.1.2",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-jasmine": "^1.0.2",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  }
}

我还没有尝试过iOS。这也可能不是最好的方法。我正在尝试制作一个裁剪框。在视图中，用户将看到他们将定位的剪辑路径下的图像。我实际上并没有裁剪图像。任何建议表示赞赏。谢谢！

更新

在我上面的链接中支持的 CSS 属性下，它说

“设置剪辑路径。支持的形状是圆形、椭圆形、矩形和多边形。您可以使用 clippy 定义自己的形状”。

我想这是一个不同的问题，但我如何使用 clippy 为 clip-path:inset 设置 CSS 属性？我自己会这样做，但我不知道怎么做。

4

0 回答 0