Fixed scan frame dimensions on Android
This commit is contained in:
Seph Soliman
parent
5f1096230c
commit
478a68b23e
@ -501,7 +501,7 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
|
||||
val height: Int = convertDeviceHeightToSupportedAspectRatio(actualPreviewWidth, actualPreviewHeight)
|
||||
barcodeFrame!!.setFrameColor(frameColor)
|
||||
barcodeFrame!!.setLaserColor(laserColor)
|
||||
(barcodeFrame as View).layout(0, 0, actualPreviewWidth, height)
|
||||
(barcodeFrame as View).layout(0, 0, this.effectLayer.width, this.effectLayer.height)
|
||||
addView(barcodeFrame)
|
||||
} else if (barcodeFrame != null) {
|
||||
removeView(barcodeFrame)
|
||||
|
||||
@ -6,6 +6,8 @@ import android.view.View
|
||||
import androidx.annotation.ColorInt
|
||||
|
||||
import com.rncamerakit.R
|
||||
import kotlin.math.max
|
||||
import kotlin.math.min
|
||||
|
||||
class BarcodeFrame(context: Context) : View(context) {
|
||||
private var borderPaint: Paint = Paint()
|
||||
@ -29,14 +31,18 @@ class BarcodeFrame(context: Context) : View(context) {
|
||||
|
||||
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
|
||||
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
|
||||
frameWidth = measuredWidth
|
||||
frameHeight = measuredHeight
|
||||
val marginWidth = width / WIDTH_SCALE
|
||||
val marginHeight = (height / HEIGHT_SCALE).toInt()
|
||||
frameRect.left = marginWidth
|
||||
frameRect.right = width - marginWidth
|
||||
frameRect.top = marginHeight
|
||||
frameRect.bottom = height - marginHeight
|
||||
val marginHeight = 40
|
||||
val marginWidth = 40
|
||||
val frameMaxWidth = 1200
|
||||
val frameMaxHeight = 600
|
||||
val frameMinWidth = 100
|
||||
val frameMinHeight = 100
|
||||
frameWidth = max(frameMinWidth, min(frameMaxWidth, measuredWidth - (marginWidth * 2)))
|
||||
frameHeight = max(frameMinHeight, min(frameMaxHeight, measuredHeight - (marginHeight * 2)))
|
||||
frameRect.left = (measuredWidth / 2) - (frameWidth / 2)
|
||||
frameRect.right = (measuredWidth / 2) + (frameWidth / 2)
|
||||
frameRect.top = (measuredHeight / 2) - (frameHeight / 2)
|
||||
frameRect.bottom = (measuredHeight / 2) + (frameHeight / 2)
|
||||
}
|
||||
|
||||
override fun onDraw(canvas: Canvas) {
|
||||
@ -75,9 +81,7 @@ class BarcodeFrame(context: Context) : View(context) {
|
||||
|
||||
companion object {
|
||||
private const val STROKE_WIDTH = 5
|
||||
private const val ANIMATION_SPEED = 8
|
||||
private const val WIDTH_SCALE = 7
|
||||
private const val HEIGHT_SCALE = 2.75
|
||||
private const val ANIMATION_SPEED = 4
|
||||
}
|
||||
|
||||
init {
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
"scripts": {
|
||||
"android": "react-native run-android",
|
||||
"ios": "react-native run-ios",
|
||||
"start": "react-native start"
|
||||
"start": "react-native start",
|
||||
"reverse": "adb reverse tcp:8081 tcp:8081"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.20",
|
||||
|
||||
@ -13,8 +13,7 @@ import {
|
||||
} from 'react-native';
|
||||
import Camera from '../../src/Camera';
|
||||
import { CameraApi, CameraType, CaptureData } from '../../src/types';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
import { Orientation } from '../../src';
|
||||
|
||||
const flashImages = {
|
||||
on: require('../images/flashOn.png'),
|
||||
@ -131,7 +130,26 @@ const BarcodeExample = ({ onBack }: { onBack: () => void }) => {
|
||||
focusMode="on"
|
||||
torchMode={torchMode ? 'on' : 'off'}
|
||||
onOrientationChange={(e) => {
|
||||
console.log('orientationChange', e.nativeEvent);
|
||||
// We recommend locking the camera UI to portrait (using a different library)
|
||||
// and rotating the UI elements counter to the orientation
|
||||
// However, we include onOrientationChange so you can match your UI to what the camera does
|
||||
switch(e.nativeEvent.orientation) {
|
||||
case Orientation.LANDSCAPE_LEFT:
|
||||
console.log('orientationChange', 'LANDSCAPE_LEFT');
|
||||
break;
|
||||
case Orientation.LANDSCAPE_RIGHT:
|
||||
console.log('orientationChange', 'LANDSCAPE_RIGHT');
|
||||
break;
|
||||
case Orientation.PORTRAIT:
|
||||
console.log('orientationChange', 'PORTRAIT');
|
||||
break;
|
||||
case Orientation.PORTRAIT_UPSIDE_DOWN:
|
||||
console.log('orientationChange', 'PORTRAIT_UPSIDE_DOWN');
|
||||
break;
|
||||
default:
|
||||
console.log('orientationChange', e.nativeEvent);
|
||||
break;
|
||||
}
|
||||
}}
|
||||
// ratioOverlay={ratios[ratioArrayPosition]}
|
||||
laserColor="red"
|
||||
@ -208,7 +226,6 @@ const styles = StyleSheet.create({
|
||||
aspectRatio: 3 / 4,
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
bottomButtons: {
|
||||
margin: 10,
|
||||
flexDirection: 'row',
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions, SafeAreaView } from 'react-native';
|
||||
import { StyleSheet, Text, View, TouchableOpacity, Image, SafeAreaView } from 'react-native';
|
||||
import Camera from '../../src/Camera';
|
||||
import { CameraApi, CameraType, CaptureData } from '../../src/types';
|
||||
import { Orientation } from '../../src';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
|
||||
const flashImages = {
|
||||
on: require('../images/flashOn.png'),
|
||||
off: require('../images/flashOff.png'),
|
||||
@ -127,10 +125,23 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
|
||||
// We recommend locking the camera UI to portrait (using a different library)
|
||||
// and rotating the UI elements counter to the orientation
|
||||
// However, we include onOrientationChange so you can match your UI to what the camera does
|
||||
const isLandscape = [Orientation.LANDSCAPE_LEFT, Orientation.LANDSCAPE_RIGHT].includes(
|
||||
e.nativeEvent.orientation,
|
||||
);
|
||||
console.log('orientationChange', isLandscape ? 'landscape' : 'portrait');
|
||||
switch(e.nativeEvent.orientation) {
|
||||
case Orientation.LANDSCAPE_LEFT:
|
||||
console.log('orientationChange', 'LANDSCAPE_LEFT');
|
||||
break;
|
||||
case Orientation.LANDSCAPE_RIGHT:
|
||||
console.log('orientationChange', 'LANDSCAPE_RIGHT');
|
||||
break;
|
||||
case Orientation.PORTRAIT:
|
||||
console.log('orientationChange', 'PORTRAIT');
|
||||
break;
|
||||
case Orientation.PORTRAIT_UPSIDE_DOWN:
|
||||
console.log('orientationChange', 'PORTRAIT_UPSIDE_DOWN');
|
||||
break;
|
||||
default:
|
||||
console.log('orientationChange', e.nativeEvent);
|
||||
break;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@ -179,7 +190,6 @@ const styles = StyleSheet.create({
|
||||
height: '100%',
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
|
||||
topButtons: {
|
||||
margin: 10,
|
||||
zIndex: 10,
|
||||
@ -189,7 +199,6 @@ const styles = StyleSheet.create({
|
||||
topButton: {
|
||||
padding: 10,
|
||||
},
|
||||
|
||||
cameraContainer: {
|
||||
justifyContent: 'center',
|
||||
flex: 1,
|
||||
@ -198,7 +207,6 @@ const styles = StyleSheet.create({
|
||||
aspectRatio: 3 / 4,
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
bottomButtons: {
|
||||
margin: 10,
|
||||
flexDirection: 'row',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user