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

feat(core): box shadow demo (#9182)

Browse Source
This commit is contained in:
William Tjondrosuharto
2021-01-30 07:28:07 +07:00
committed by Nathan Walker
parent c68099a837
commit 9d4f1382f1
9 changed files with 620 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/core/ui/styling/background.ios.ts
View File

@@ -8,8 +8,6 @@ import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
import { ImageSource } from '../../image-source';
import { CSSValue, parse as cssParse } from '../../css-value';
import { BoxShadow } from './box-shadow';
import { Screen } from '../../platform';
import { StackLayout } from '../layouts/stack-layout';
export * from './background-common';
@@ -92,11 +90,10 @@ export namespace ios {
const boxShadow = view.style.boxShadow;
if (boxShadow) {
// this is required (if not, shadow will get cutoff at parent's dimensions)
// nativeView.clipsToBounds doesn't work
view.setProperty('clipToBounds', false);
drawBoxShadow(nativeView, boxShadow, background);
drawBoxShadow(nativeView, view, boxShadow, background);
}
}
}
@@ -720,40 +717,29 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: Backg
}
// TODO: use sublayer if its applied to a layout
function drawBoxShadow(nativeView: NativeView, boxShadow: BoxShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: BoxShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
const layer: CALayer = nativeView.layer;
layer.masksToBounds = false;
nativeView.clipsToBounds = false;
if (!background.color.a) {
if (!background.color?.a) {
// add white background if view has a transparent background
layer.backgroundColor = UIColor.whiteColor.CGColor;
}
// shadow opacity is handled on the shadow's color instance
layer.shadowOpacity = 1;
layer.shadowRadius = boxShadow.spreadRadius;
layer.shadowRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
layer.shadowColor = boxShadow.color.ios.CGColor;
// / 2 here since ios's shadow offset is bigger than android
// TODO: this is just for experimenting with the amount of offset,
// need to use some real calculation here to gain parity with android's
// implementation
const adjustedShadowOffset = {
x: boxShadow.offsetX / 2,
y: boxShadow.offsetY / 2,
x: layout.toDeviceIndependentPixels(boxShadow.offsetX),
y: layout.toDeviceIndependentPixels(boxShadow.offsetY),
};
layer.shadowOffset = CGSizeMake(adjustedShadowOffset.x, adjustedShadowOffset.y);
// this should match the view's border radius
const cornerRadius = 0;
// This doesn't handle the offsets properly
// factor in shadowRadius and the offsets so shadow don't spread too far
// layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(CGRectMake(
// nativeView.bounds.origin.x + boxShadow.spreadRadius + adjustedShadowOffset.x,
// nativeView.bounds.origin.y + boxShadow.spreadRadius + adjustedShadowOffset.y,
// nativeView.bounds.size.width - boxShadow.spreadRadius - adjustedShadowOffset.x,
// nativeView.bounds.size.height - boxShadow.spreadRadius - adjustedShadowOffset.y), cornerRadius).CGPath;
const cornerRadius = 0; // layout.toDeviceIndependentPixels(view.style.borderRadius);
// This has the nice glow with box shadow of 0,0
layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(nativeView.bounds, cornerRadius).CGPath;