ios学习--camera zoom with slider

相机预览缩放与图片后处理
本文介绍如何使用Core Graphics实现相机预览视图的缩放,并通过UIPinchGestureRecognizer响应捏合手势来调整缩放比例。此外,还介绍了在图片后处理中根据相机缩放级别调整图片大小的方法。

设置preview zoom的方式:

// create a uiview subclass for showing the camera feed 
 
UIView *previewView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 430)]; 
 
[[self view] addSubview:previewView]; 
 
 
CGRect layerRect = CGRectMake(0, 0, 320, 430); 
 
[[self avCaptureVideoPreviewLayer] setBounds:layerRect]; 
 
 
[[self  previewLayer] setPosition:CGPointMake(CGRectGetMidX(layerRect), CGRectGetMidY(layerRect))]; 
 
 
// add the video previewview layer to the preview view 
 
[[previewView layer] addSublayer:[self avCaptureVideoPreviewLayer]]; 

// zoom the preview view using core graphics 
 
[previewView setTransform:CGAffineTransformMakeScale(2.0, 2.0 )]; 

设置preview zoom的方式:

- (void)handlePinchGesture:(UIPinchGestureRecognizer *)gestureRecognizer { 
 
   
if([gestureRecognizer state] == UIGestureRecognizerStateBegan) { 
       
// Reset the last scale, necessary if there are multiple objects with different scales 
        lastScale
= [gestureRecognizer scale]; 
   
} 
 
   
if ([gestureRecognizer state] == UIGestureRecognizerStateBegan ||  
       
[gestureRecognizer state] == UIGestureRecognizerStateChanged) { 
 
       
CGFloat currentScale = [[[gestureRecognizer view].layer valueForKeyPath:@"transform.scale"] floatValue]; 
 
       
// Constants to adjust the max/min values of zoom 
       
const CGFloat kMaxScale = 2.0; 
       
const CGFloat kMinScale = 1.0; 
 
       
CGFloat newScale = 1 -  (lastScale - [gestureRecognizer scale]);  
        newScale
= MIN(newScale, kMaxScale / currentScale);    
        newScale
= MAX(newScale, kMinScale / currentScale); 
       
CGAffineTransform transform = CGAffineTransformScale([[gestureRecognizer view] transform], newScale, newScale); 
       
[gestureRecognizer view].transform = transform; 
 
        lastScale
= [gestureRecognizer scale];  // Store the previous scale factor for the next pinch gesture call   
   
} 
} 

 

图片后处理:

 if (cameraZoom > 1.0)  
 
{ 
       
// save the images original size 
       
CGSize orgSize = [image size];   
 
       
// resize the image to the zoom scale   
        image
= [image resizedImage:CGSizeMake(image.size.width * cameraZoom, image.size.height *cameraZoom) interpolationQuality:kCGInterpolationNone];            
 
       
// now calculate the offset x and offset y 
       
CGFloat offsetX = ( image.size.width / 2 ) - (orgSize.width /2) ; 
       
CGFloat offsetY =  ( image.size.height / 2 ) - (orgSize.height /2); 
 
         
// crop the image from the offset position to the original width and height 
         image
= [image croppedImage:CGRectMake(offsetX, offsetY, orgSize.width, orgSize.height)]; 
   
} 
 
 
   
UIButton *imgBtn = (UIButton *)[self.view viewWithTag:500]; 
   
[imgBtn setImage:image forState:UIControlStateNormal]; 

}

{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "patch-package", "generate:icons": "node generateIconMap.js" }, "dependencies": { "@ant-design/icons-react-native": "^2.3.2", "@ant-design/react-native": "^5.1.0", "@react-native-async-storage/async-storage": "^1.19.0", "@react-native-community/cameraroll": "^4.0.0", "@react-native-community/masked-view": "0.1.11", "@react-native-community/segmented-control": "^2.1.1", "@react-native-community/slider": "^3.0.3", "@react-native-community/viewpager": "^4.1.6", "@react-native-picker/picker": "^1.16.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "@rneui/base": "^4.0.0-rc.8", "@rneui/themed": "^4.0.0-rc.8", "d3-shape": "^1.3.7", "minio": "^7.0.15", "react": "17.0.2", "react-native": "0.68.0", "react-native-background-timer": "^2.4.1", "react-native-device-info": "^8.1.3", "react-native-elements": "^1.2.7", "react-native-exception-handler": "^2.10.10", "react-native-fs": "^2.18.0", "react-native-gesture-handler": "2.14.0", "react-native-get-location": "^2.1.0", "react-native-get-random-values": "^1.4.0", "react-native-image-picker": "^3.8.1", "react-native-image-zoom-viewer": "^3.0.1", "react-native-linear-gradient": "^2.8.3", "react-native-modal-dropdown": "^1.0.2", "react-native-permissions": "3.8.0", "react-native-reanimated": "2.14.4", "react-native-safe-area-context": "3.3.2", "react-native-screens": "3.15.0", "react-native-signature-capture": "^0.4.12", "react-native-sound": "^0.11.1", "react-native-sqlite-storage": "^4.1.0", "react-native-svg-charts": "5.4.0", "react-native-table-component": "^1.2.2", "react-native-vector-icons": "^9.2.0", "react-native-webview": "^11.26.0", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/cli-doctor": "^10.0.0", "@react-native-community/eslint-config": "^2.0.0", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "babel-jest": "^26.6.3", "babel-plugin-import": "^1.13.8", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.68.0", "patch-package": "^6.4.7", "react-native-version-check": "^3.5.0", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } } 这是我的json文件按照你说的降级 降级 @ant-design/react-native 到5.0.1是否有其他报错?
08-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值