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

feat(root-layout): support gradient colors on shade cover (#9626)

Browse Source 
Co-authored-by: William Juan <williamjuan027@gmail.com>
This commit is contained in:
Nathan Walker
2022-01-13 21:41:52 -08:00
committed by GitHub
parent 2337d29a05
commit 06c00d2252
11 changed files with 252 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/core/ui/utils.ios.ts
View File

@ -1,4 +1,21 @@
import * as utils from '../utils';
import { LinearGradient } from './styling/linear-gradient';
interface NativeScriptUIView extends UIView {
hasNonUniformBorder: boolean;
borderLayer: CALayer;
hasBorderMask: boolean;
borderOriginalMask: CALayer;
topBorderLayer: CALayer;
rightBorderLayer: CALayer;
bottomBorderLayer: CALayer;
leftBorderLayer: CALayer;
gradientLayer: CAGradientLayer;
boxShadowLayer: CALayer;
}
export namespace ios {
export function getActualHeight(view: UIView): number {
@ -24,4 +41,51 @@ export namespace ios {
return utils.layout.toDevicePixels(min);
}
export function drawGradient(nativeView: NativeScriptUIView, gradient: LinearGradient, gradientLayerOpacity?: number, index?: number): CAGradientLayer {
let gradientLayer: CAGradientLayer;
if (nativeView && gradient) {
gradientLayer = CAGradientLayer.layer();
if (typeof gradientLayerOpacity === 'number') {
gradientLayer.opacity = gradientLayerOpacity;
}
gradientLayer.frame = nativeView.bounds;
nativeView.gradientLayer = gradientLayer;
const iosColors = NSMutableArray.alloc().initWithCapacity(gradient.colorStops.length);
const iosStops = NSMutableArray.alloc<number>().initWithCapacity(gradient.colorStops.length);
let hasStops = false;
gradient.colorStops.forEach((stop) => {
iosColors.addObject(stop.color.ios.CGColor);
if (stop.offset) {
iosStops.addObject(stop.offset.value);
hasStops = true;
}
});
gradientLayer.colors = iosColors;
if (hasStops) {
gradientLayer.locations = iosStops;
}
const alpha = gradient.angle / (Math.PI * 2);
const startX = Math.pow(Math.sin(Math.PI * (alpha + 0.75)), 2);
const startY = Math.pow(Math.sin(Math.PI * (alpha + 0.5)), 2);
const endX = Math.pow(Math.sin(Math.PI * (alpha + 0.25)), 2);
const endY = Math.pow(Math.sin(Math.PI * alpha), 2);
gradientLayer.startPoint = { x: startX, y: startY };
gradientLayer.endPoint = { x: endX, y: endY };
nativeView.layer.insertSublayerAtIndex(gradientLayer, index || 0);
}
return gradientLayer;
}
export function clearGradient(nativeView: NativeScriptUIView): void {
if (nativeView?.gradientLayer) {
nativeView.gradientLayer.removeFromSuperlayer();
}
}
}