From b6cf7df764240c3398aecfa0af33f077a8cb7aac Mon Sep 17 00:00:00 2001 From: aleclarsoniv Date: Thu, 14 Jul 2016 12:55:33 -0700 Subject: [PATCH 1/2] Add Image resizeMode center to iOS --- Libraries/Image/Image.ios.js | 2 +- Libraries/Image/RCTImageUtils.m | 30 ++++++++++++++++++++++++++++-- Libraries/Image/RCTResizeMode.h | 1 + Libraries/Image/RCTResizeMode.m | 1 + 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index 88b03b6ee1f72a..0fc1d20c5c33bc 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -173,7 +173,7 @@ const Image = React.createClass({ * - `repeat`: Repeat the image to cover the frame of the view. The * image will keep it's size and aspect ratio. (iOS only) */ - resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat']), + resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), /** * A unique identifier for this element to be used in UI Automation * testing scripts. diff --git a/Libraries/Image/RCTImageUtils.m b/Libraries/Image/RCTImageUtils.m index 515948a46e8e34..b2fc745487d970 100644 --- a/Libraries/Image/RCTImageUtils.m +++ b/Libraries/Image/RCTImageUtils.m @@ -53,9 +53,10 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, destSize.height = destSize.width / aspect; } - // Calculate target aspect ratio if needed (don't bother if resizeMode == stretch) + // Calculate target aspect ratio if needed CGFloat targetAspect = 0.0; - if (resizeMode != UIViewContentModeScaleToFill) { + if (resizeMode != RCTResizeModeCenter && + resizeMode != RCTResizeModeStretch) { targetAspect = destSize.width / destSize.height; if (aspect == targetAspect) { resizeMode = RCTResizeModeStretch; @@ -110,6 +111,26 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, RCTCeilSize(sourceSize, destScale) }; } + + case RCTResizeModeCenter: + + // Make sure the image is not clipped by the target. + if (sourceSize.height > destSize.height) { + sourceSize.width = destSize.width = destSize.width; + sourceSize.height = sourceSize.width / aspect; + } + if (sourceSize.width > destSize.width) { + sourceSize.height = destSize.height = destSize.height; + sourceSize.width = sourceSize.height * aspect; + } + + return (CGRect){ + { + RCTFloorValue((destSize.width - sourceSize.width) / 2, destScale), + RCTFloorValue((destSize.height - sourceSize.height) / 2, destScale), + }, + RCTCeilSize(sourceSize, destScale) + }; } } @@ -131,6 +152,10 @@ CGSize RCTTargetSize(CGSize sourceSize, CGFloat sourceScale, BOOL allowUpscaling) { switch (resizeMode) { + case RCTResizeModeCenter: + + return RCTTargetRect(sourceSize, destSize, destScale, resizeMode).size; + case RCTResizeModeStretch: if (!allowUpscaling) { @@ -207,6 +232,7 @@ BOOL RCTUpscalingRequired(CGSize sourceSize, CGFloat sourceScale, } case RCTResizeModeRepeat: + case RCTResizeModeCenter: return NO; } diff --git a/Libraries/Image/RCTResizeMode.h b/Libraries/Image/RCTResizeMode.h index 4f623eac72f73d..2b791454243945 100644 --- a/Libraries/Image/RCTResizeMode.h +++ b/Libraries/Image/RCTResizeMode.h @@ -13,6 +13,7 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) { RCTResizeModeCover = UIViewContentModeScaleAspectFill, RCTResizeModeContain = UIViewContentModeScaleAspectFit, RCTResizeModeStretch = UIViewContentModeScaleToFill, + RCTResizeModeCenter = UIViewContentModeCenter, RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values. }; diff --git a/Libraries/Image/RCTResizeMode.m b/Libraries/Image/RCTResizeMode.m index 85f5766d631d35..6142fc6ab1fb73 100644 --- a/Libraries/Image/RCTResizeMode.m +++ b/Libraries/Image/RCTResizeMode.m @@ -15,6 +15,7 @@ @implementation RCTConvert(RCTResizeMode) @"cover": @(RCTResizeModeCover), @"contain": @(RCTResizeModeContain), @"stretch": @(RCTResizeModeStretch), + @"center": @(RCTResizeModeCenter), @"repeat": @(RCTResizeModeRepeat), }), RCTResizeModeStretch, integerValue) From 7b591f4496bca1d15a1db03bc71e2da181d8c552 Mon Sep 17 00:00:00 2001 From: aleclarsoniv Date: Mon, 18 Jul 2016 15:42:24 -0700 Subject: [PATCH 2/2] [RCTImageUtils] Remove superfluous assignment in RCTTargetRect --- Libraries/Image/RCTImageUtils.m | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Libraries/Image/RCTImageUtils.m b/Libraries/Image/RCTImageUtils.m index b2fc745487d970..ce7a5530bbaf8c 100644 --- a/Libraries/Image/RCTImageUtils.m +++ b/Libraries/Image/RCTImageUtils.m @@ -73,12 +73,12 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, if (targetAspect <= aspect) { // target is taller than content - sourceSize.width = destSize.width = destSize.width; + sourceSize.width = destSize.width; sourceSize.height = sourceSize.width / aspect; } else { // target is wider than content - sourceSize.height = destSize.height = destSize.height; + sourceSize.height = destSize.height; sourceSize.width = sourceSize.height * aspect; } return (CGRect){ @@ -93,7 +93,7 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, if (targetAspect <= aspect) { // target is taller than content - sourceSize.height = destSize.height = destSize.height; + sourceSize.height = destSize.height; sourceSize.width = sourceSize.height * aspect; destSize.width = destSize.height * targetAspect; return (CGRect){ @@ -103,7 +103,7 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, } else { // target is wider than content - sourceSize.width = destSize.width = destSize.width; + sourceSize.width = destSize.width; sourceSize.height = sourceSize.width / aspect; destSize.height = destSize.width / targetAspect; return (CGRect){ @@ -116,11 +116,11 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, // Make sure the image is not clipped by the target. if (sourceSize.height > destSize.height) { - sourceSize.width = destSize.width = destSize.width; + sourceSize.width = destSize.width; sourceSize.height = sourceSize.width / aspect; } if (sourceSize.width > destSize.width) { - sourceSize.height = destSize.height = destSize.height; + sourceSize.height = destSize.height; sourceSize.width = sourceSize.height * aspect; }