CSS clip-path inset shape

[dsum27]

I am trying to use Nativescript style clip-path found here. My code

#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)
   */
}

My view

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

I do see the background image and all my other styles applied, but I can not get it to clip the path.

I have also tried

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

and

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

and

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

My package.json file

{
  "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"
  }
}

I have not tried iOS yet.
This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position. I am not actually cropping the image. Any suggestions are appreciated. Thanks!

Update

Under Supported CSS properties in my link above it says

"Sets the clip-path. Supported shapes are circle, ellipse, rect and polygon. You can define your own shape using clippy".

I guess this is a different question but how do I use clippy to set up CSS property for clip-path:inset? I would do this myself but I don't know how.

[tsonevn]

Hi @dsum27,

Thank you for reporting this issue.
I have tested the given scenario and found that this is a real issue for both iOS and Android.
clip-path will not be applied correctly on some of the Layouts and Components. I am attaching sample code , where the problem has been reproduced.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout >

    <Image class="elementStyle"  src="~/files/icon.png" stretch ="none" /> 
    <Button backgroundColor="blue" class="elementStyle"  text="TAP"  />
    <Label backgroundColor="red" class="elementStyle" text="sample label" textWrap="true"/>
    <TextField backgroundColor="green" class="elementStyle" hint="" text="Sample textfield" />
    <TextView  class="elementStyle" text="Sample text view" backgroundColor="yellow" editable="true" />
    <AbsoluteLayout class="container">
    </AbsoluteLayout>

  </StackLayout>
</Page>

app.css

.container {
    width: 200;
    height: 200;
   clip-path: circle(50% at 50% 50%);
background-color: black;
   /* 
        inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
   */
}
.elementStyle{
    width: 200;
    height: 200;

   clip-path: circle(50% at 50% 50%);
}

In regard to your second question you could use nativescript-imagecropper plugin that provides the functionality, that you need.

I hope this is applicable for you.

[hamorphis]

The clip-path property supports only the following shapes: rect, circle, ellipse, and polygon. Here is an example: https://github.com/NativeScript/NativeScript/blob/master/apps/app/ui-tests-app/css/clip-path.xml

[hamorphis]

NativeScript is not a browser and does not understand property names such as webkit-* or moz-*

[hamorphis]

We will need to add support for the inset shape. Until then you can achieve the same effect by using polygon which is the most versatile shape. I will mark this issue as Feature.

[hamorphis]

@dsum27 Until we implement the inset value, you could try something like this polygon:

clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);

[dsum27]

@hamorphis
I have used nativescript-imagecropper as @tsonevn sugguested. It's working very well but I have to modify Java and Xcode to return the values I want. I will give this a try and see how it works. Thank you!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.