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.
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
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
and
and
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.