javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add inset CSS clip-path support

Browse Source
This commit is contained in:
Rossen Hristov
2016-11-10 12:07:25 +02:00
parent 2f83f6d882
commit 9ebc01b8e9
6 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/app/ui-tests-app/css/clip-path-inset.xml Normal file
View File

@ -0,0 +1,34 @@
<Page>
<GridLayout rows="*,*,*,*,*" columns="*,*" automationText="clipPath">
<StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="no clip-path" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20)" style="clip-path: inset(10 20); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20 30)" style="clip-path: inset(10 20 30); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="0" row="4" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20%)" style="clip-path: inset(10% 20%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20% 30%)" style="clip-path: inset(10% 20% 30%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
<StackLayout col="1" row="4" width="100" height="100" style.backgroundColor="magenta">
<Button width="100" height="100" text="inset(10% 20% 30% 40%)" style="clip-path: inset(10% 20% 30% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
</StackLayout>
</GridLayout>
</Page>

28
apps/app/ui-tests-app/css/clip-path.xml
View File

@ -1,9 +1,25 @@
<Page> <Page>
<GridLayout rows="*,*,*,*,*" automationText="clipPath"> <GridLayout columns="*,*" rows="*,*,*,*">
<Button text="circle" style="background-color: red; border-width:2; border-color: blue; clip-path: circle(100% at 50% 50%);"/> <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
<Button text="ellipse" style="background-color: orange; border-width:2; border-color: green; clip-path: ellipse(50% 50% at 50% 50%);" row="1" /> <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
<Button text="rect" style="background-color: red; border-width:2; border-color: blue; clip-path: rect(0, 0, 100%, 100%);" row="2" /> </StackLayout>
<Button text="polygon" style="background-color: magenta; border-width:2; border-color: red; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" row="3" /> <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button text="image polygon" style="background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/ce/maldives.jpg'); border-width:2; border-color: red; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);" row="4" /> <Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
<Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
<Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button text="polygon" width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
<StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
<Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
</StackLayout>
</GridLayout> </GridLayout>
</Page> </Page>

BIN
apps/app/ui-tests-app/css/inset-test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

1
apps/app/ui-tests-app/css/main-page.ts
View File

@ -22,6 +22,7 @@ export function pageLoaded(args: EventData) {
examples.set("switch", "css/views"); examples.set("switch", "css/views");
examples.set("zindex", "css/zindex"); examples.set("zindex", "css/zindex");
examples.set("clipPath", "css/clip-path"); examples.set("clipPath", "css/clip-path");
examples.set("clipPathInset", "css/clip-path-inset");
examples.set("padding", "css/padding"); examples.set("padding", "css/padding");
examples.set("label-background-image", "css/label-background-image"); examples.set("label-background-image", "css/label-background-image");
examples.set("transform-decoration-color", "css/transform-decoration-color"); examples.set("transform-decoration-color", "css/transform-decoration-color");

47
tns-core-modules/ui/styling/background.ios.ts
View File

@ -255,13 +255,46 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
var arr = value.split(/[\s]+/); var arr = value.split(/[\s]+/);
var top = common.cssValueToDevicePixels(arr[0], bounds.top); var top = common.cssValueToDevicePixels(arr[0], bounds.top);
var left = common.cssValueToDevicePixels(arr[1], bounds.left); var right = common.cssValueToDevicePixels(arr[1], bounds.right);
var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom); var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
var right = common.cssValueToDevicePixels(arr[3], bounds.right); var left = common.cssValueToDevicePixels(arr[3], bounds.left);
path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right, bottom)).CGPath; path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
}
else if (functionName === "inset") {
var arr = value.split(/[\s]+/);
} else if (functionName === "circle") { let topString: string;
let rightString: string;
let bottomString: string;
let leftString: string;
if (arr.length === 1) {
topString = rightString = bottomString = leftString = arr[0];
}
else if (arr.length === 2) {
topString = bottomString = arr[0];
rightString = leftString = arr[1];
}
else if (arr.length === 3) {
topString = arr[0];
rightString = leftString = arr[1];
bottomString = arr[2];
}
else if (arr.length === 4) {
topString = arr[0];
rightString = arr[1];
bottomString = arr[2];
leftString = arr[3];
}
var top = common.cssValueToDevicePixels(topString, bounds.bottom);
var right = common.cssValueToDevicePixels("100%", bounds.right) - common.cssValueToDevicePixels(rightString, bounds.right);
var bottom = common.cssValueToDevicePixels("100%", bounds.bottom) - common.cssValueToDevicePixels(bottomString, bounds.bottom);
var left = common.cssValueToDevicePixels(leftString, bounds.right);
path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
}
else if (functionName === "circle") {
var arr = value.split(/[\s]+/); var arr = value.split(/[\s]+/);
var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2); var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
@ -270,7 +303,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath; path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
} else if (functionName === "ellipse") { }
else if (functionName === "ellipse") {
var arr = value.split(/[\s]+/); var arr = value.split(/[\s]+/);
var rX = common.cssValueToDevicePixels(arr[0], bounds.right); var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
@ -285,7 +319,8 @@ function drawClipPath(nativeView: UIView, background: common.Background) {
path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath; path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
} else if (functionName === "polygon") { }
else if (functionName === "polygon") {
path = CGPathCreateMutable() path = CGPathCreateMutable()

2
tns-core-modules/ui/styling/style.ts
View File

@ -300,7 +300,7 @@ function isNonNegativeFiniteNumber(value: number): boolean {
return isFinite(value) && !isNaN(value) && value >= 0; return isFinite(value) && !isNaN(value) && value >= 0;
} }
var supportedPaths = ["rect", "circle", "ellipse", "polygon"]; var supportedPaths = ["rect", "circle", "ellipse", "polygon", "inset"];
function isClipPathValid(value: string): boolean { function isClipPathValid(value: string): boolean {
if (!value) { if (!value) {
return true; return true;