问题修改
This commit is contained in:
parent
01bed0ed7b
commit
dccdf40eac
|
|
@ -79,14 +79,14 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
document.addEventListener('deviceready', () => {
|
||||
if (cordova.plugins && cordova.plugins.camerapreview) {
|
||||
window.CameraPreview = cordova.plugins.camerapreview;
|
||||
// document.addEventListener('deviceready', () => {
|
||||
// if (cordova.plugins && cordova.plugins.camerapreview) {
|
||||
// window.CameraPreview = cordova.plugins.camerapreview;
|
||||
this.startCamera();
|
||||
} else {
|
||||
console.error('CameraPreview插件未加载');
|
||||
}
|
||||
}, false);
|
||||
// } else {
|
||||
// console.error('CameraPreview插件未加载');
|
||||
// }
|
||||
// }, false);
|
||||
},
|
||||
|
||||
// 启动相机预览
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
methods: {
|
||||
// 打开相机
|
||||
openCamera() {
|
||||
this.$cordova.plugins.cameraPreview.startCamera({
|
||||
window.CameraPreview.startCamera({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: window.screen.width,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -76,8 +76,14 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 相机预览页面 - 修改为固定全屏 -->
|
||||
<!-- 相机预览页面 -->
|
||||
<view v-if="showCamera" class="camera-container">
|
||||
<view v-if="showCamera" class="camera-wrapper">
|
||||
<!-- 相机预览容器 - 单独放置 -->
|
||||
<view class="camera-preview-container"></view>
|
||||
|
||||
<!-- UI控制层 - 独立于相机预览 -->
|
||||
<view class="camera-ui-layer">
|
||||
<!-- 底部控制区 -->
|
||||
<view class="bottom-controls">
|
||||
<view class="control-btn" @click="closeCamera">
|
||||
|
|
@ -99,12 +105,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐藏的canvas用于图片处理 -->
|
||||
<canvas
|
||||
canvas-id="imageCanvas"
|
||||
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
|
||||
></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -163,25 +164,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 设置全屏模式（仅Android）
|
||||
setFullscreenMode(enable) {
|
||||
try {
|
||||
// #ifdef APP-PLUS
|
||||
if (this.systemInfo && this.systemInfo.platform === 'android') {
|
||||
if (enable) {
|
||||
// 隐藏状态栏和导航栏
|
||||
plus.navigator.setFullscreen(true);
|
||||
} else {
|
||||
// 恢复状态栏和导航栏
|
||||
plus.navigator.setFullscreen(false);
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
} catch (error) {
|
||||
console.error('设置全屏模式失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化Cordova - 改进版本
|
||||
initializeCordova() {
|
||||
console.log('开始初始化Cordova...');
|
||||
|
|
@ -259,10 +241,7 @@ export default {
|
|||
getCameraPlugin() {
|
||||
// 按照插件注册的实际路径检查
|
||||
const possiblePaths = [
|
||||
() => window.CameraPreview, // 全局注册的路径
|
||||
() => window.cordova?.plugins?.CameraPreview,
|
||||
() => window.plugins?.CameraPreview,
|
||||
() => cordova?.plugins?.CameraPreview
|
||||
() => window.CameraPreview // 全局注册的路径
|
||||
];
|
||||
for (let getPlugin of possiblePaths) {
|
||||
try {
|
||||
|
|
@ -311,59 +290,45 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 初始化相机 - 改进版本，添加聚焦支持
|
||||
// 初始化相机 - 关键修改
|
||||
// 初始化相机 - 调整坐标计算
|
||||
async initCamera() {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log('初始化相机预览...');
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
if (!CameraPreview) {
|
||||
reject(new Error('相机插件不可用'));
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取屏幕尺寸和状态栏高度
|
||||
const systemInfo = this.systemInfo || uni.getSystemInfoSync();
|
||||
const screenWidth = systemInfo.screenWidth;
|
||||
const screenHeight = systemInfo.screenHeight;
|
||||
const statusBarHeight = systemInfo.statusBarHeight || 0;
|
||||
|
||||
// 相机预览配置 - 始终使用全屏背景模式
|
||||
let cameraY = 0;
|
||||
let cameraHeight = screenHeight;
|
||||
let toBack = true; // 设置为背景层，让UI元素显示在上方
|
||||
|
||||
console.log('屏幕信息:', {
|
||||
platform: systemInfo.platform,
|
||||
screenWidth,
|
||||
screenHeight,
|
||||
statusBarHeight,
|
||||
cameraY,
|
||||
cameraHeight,
|
||||
toBack
|
||||
});
|
||||
// 获取整个相机包装器的尺寸
|
||||
const cameraWrapper = document.querySelector('.camera-wrapper');
|
||||
if (!cameraWrapper) {
|
||||
reject(new Error('找不到相机容器'));
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = cameraWrapper.getBoundingClientRect();
|
||||
const options = {
|
||||
x: 0,
|
||||
y: cameraY,
|
||||
width: screenWidth,
|
||||
height: cameraHeight,
|
||||
x: rect.left,
|
||||
y: rect.top,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
camera: CameraPreview.CAMERA_DIRECTION?.BACK || 'back',
|
||||
tapPhoto: false,
|
||||
previewDrag: false,
|
||||
toBack: toBack, // 根据平台动态设置
|
||||
toBack: false, // 确保相机在WebView上层
|
||||
alpha: 1,
|
||||
tapFocus: true, // 启用点击聚焦
|
||||
tapFocus: true,
|
||||
disableExifHeaderStripping: false
|
||||
};
|
||||
|
||||
console.log('相机配置:', options);
|
||||
|
||||
CameraPreview.startCamera(
|
||||
options,
|
||||
(result) => {
|
||||
console.log('相机启动成功:', result);
|
||||
this.cameraStarted = true;
|
||||
// 启动后进行一次自动聚焦
|
||||
this.performAutoFocus();
|
||||
resolve();
|
||||
},
|
||||
(error) => {
|
||||
|
|
@ -375,154 +340,28 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
// 执行自动聚焦
|
||||
async performAutoFocus() {
|
||||
if (!this.cameraStarted || !this.autoFocusEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
if (!CameraPreview || typeof CameraPreview.setFocus !== 'function') {
|
||||
console.log('相机插件不支持聚焦功能');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.isFocusing = true;
|
||||
this.focusSuccess = false;
|
||||
|
||||
// 清除之前的聚焦超时
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
}
|
||||
|
||||
console.log('开始自动聚焦...');
|
||||
|
||||
await new Promise((resolve, reject)=> {
|
||||
// 设置聚焦超时
|
||||
this.focusTimeout = setTimeout(() => {
|
||||
console.log('聚焦超时');
|
||||
this.isFocusing = false;
|
||||
resolve();
|
||||
}, 3000);
|
||||
|
||||
CameraPreview.setFocus(
|
||||
(result) => {
|
||||
console.log('自动聚焦成功:', result);
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
this.focusTimeout = null;
|
||||
}
|
||||
this.isFocusing = false;
|
||||
this.focusSuccess = true;
|
||||
// 显示聚焦成功状态一段时间
|
||||
setTimeout(() => {
|
||||
this.focusSuccess = false;
|
||||
}, 1000);
|
||||
resolve();
|
||||
},
|
||||
(error) => {
|
||||
console.error('自动聚焦失败:', error);
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
this.focusTimeout = null;
|
||||
}
|
||||
this.isFocusing = false;
|
||||
resolve(); // 即使聚焦失败也继续
|
||||
}
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('聚焦过程出错:', error);
|
||||
this.isFocusing = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 处理点击聚焦
|
||||
async handleTapToFocus(event) {
|
||||
if (!this.cameraStarted || this.isFocusing) {
|
||||
return;
|
||||
}
|
||||
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
if (!CameraPreview || typeof CameraPreview.tapToFocus !== 'function') {
|
||||
console.log('相机插件不支持点击聚焦功能');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取点击位置
|
||||
// 处理覆盖层点击事件
|
||||
handleOverlayClick(event) {
|
||||
// 计算点击位置相对于相机的坐标
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const x = event.detail.x - rect.left;
|
||||
const y = event.detail.y - rect.top;
|
||||
const x = event.touches[0].clientX - rect.left;
|
||||
const y = event.touches[0].clientY - rect.top;
|
||||
|
||||
// 转换为相对坐标 (0-1)
|
||||
const relativeX = x / rect.width;
|
||||
const relativeY = y / rect.height;
|
||||
|
||||
console.log('点击聚焦位置:', { x: relativeX, y: relativeY });
|
||||
|
||||
// 显示聚焦指示器
|
||||
this.showFocusIndicator = true;
|
||||
this.focusIndicatorStyle = {
|
||||
left: `${x - 30}rpx`,
|
||||
top: `${y - 30}rpx`
|
||||
};
|
||||
|
||||
this.isFocusing = true;
|
||||
this.focusSuccess = false;
|
||||
|
||||
// 清除之前的聚焦超时
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
}
|
||||
|
||||
await new Promise((resolve, reject)=> {
|
||||
// 设置聚焦超时
|
||||
this.focusTimeout = setTimeout(() => {
|
||||
console.log('点击聚焦超时');
|
||||
this.isFocusing = false;
|
||||
this.showFocusIndicator = false;
|
||||
resolve();
|
||||
}, 3000);
|
||||
|
||||
CameraPreview.tapToFocus(
|
||||
relativeX,
|
||||
relativeY,
|
||||
(result) => {
|
||||
console.log('点击聚焦成功:', result);
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
this.focusTimeout = null;
|
||||
}
|
||||
this.isFocusing = false;
|
||||
this.focusSuccess = true;
|
||||
// 显示聚焦成功状态
|
||||
setTimeout(() => {
|
||||
this.focusSuccess = false;
|
||||
this.showFocusIndicator = false;
|
||||
}, 1000);
|
||||
resolve();
|
||||
// 调用聚焦功能
|
||||
this.tapToFocus(x, y);
|
||||
},
|
||||
(error) => {
|
||||
console.error('点击聚焦失败:', error);
|
||||
if (this.focusTimeout) {
|
||||
clearTimeout(this.focusTimeout);
|
||||
this.focusTimeout = null;
|
||||
}
|
||||
this.isFocusing = false;
|
||||
this.showFocusIndicator = false;
|
||||
resolve(); // 即使聚焦失败也继续
|
||||
}
|
||||
|
||||
// 点击聚焦
|
||||
tapToFocus(x, y) {
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
if (CameraPreview && this.cameraStarted) {
|
||||
CameraPreview.tapToFocus(
|
||||
x,
|
||||
y,
|
||||
() => console.log('聚焦成功'),
|
||||
(error) => console.error('聚焦失败', error)
|
||||
);
|
||||
}
|
||||
)
|
||||
;
|
||||
} catch (error) {
|
||||
console.error('点击聚焦过程出错:', error);
|
||||
this.isFocusing = false;
|
||||
this.showFocusIndicator = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭相机
|
||||
|
|
@ -900,6 +739,15 @@ export default {
|
|||
// 清理资源
|
||||
cleanup() {
|
||||
console.log('清理资源...');
|
||||
if (this.cameraStarted) {
|
||||
const CameraPreview = this.getCameraPlugin();
|
||||
if (CameraPreview) {
|
||||
CameraPreview.setOnView(null); // 解除元素绑定
|
||||
CameraPreview.stopCamera();
|
||||
}
|
||||
this.cameraStarted = false;
|
||||
}
|
||||
|
||||
// 清除超时
|
||||
if (this.deviceReadyTimeout) {
|
||||
clearTimeout(this.deviceReadyTimeout);
|
||||
|
|
@ -923,6 +771,37 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
/* 新增相机包装器样式 */
|
||||
.camera-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000; /* 基础层级 */
|
||||
}
|
||||
|
||||
/* 相机预览容器 - 无内容，仅用于定位 */
|
||||
.camera-preview-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1; /* 较低层级 */
|
||||
}
|
||||
|
||||
/* UI控制层 - 显示在相机之上 */
|
||||
.camera-ui-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2; /* 高于相机预览 */
|
||||
pointer-events: none; /* 允许点击穿透到相机 */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
height: auto;
|
||||
|
|
@ -964,27 +843,43 @@ export default {
|
|||
|
||||
/* 相机预览样式 */
|
||||
.camera-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000000;
|
||||
z-index: 100000; /* 增加相机预览层级 */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70vh; /* 增加高度 */
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
z-index: 1000; /* 确保在H5层级中 */
|
||||
}
|
||||
|
||||
/* 控制区 */
|
||||
.bottom-controls {
|
||||
.camera-preview {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 100rpx;
|
||||
z-index: 100001; /* 底部控制按钮层级 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1; /* 相机预览在底层 */
|
||||
}
|
||||
|
||||
/* 透明覆盖层 - 关键 */
|
||||
.camera-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2; /* 覆盖层在上层 */
|
||||
pointer-events: auto; /* 捕获点击事件 */
|
||||
}
|
||||
|
||||
/* 控制按钮区域 - 需要单独设置可点击 */
|
||||
.bottom-controls {
|
||||
/* 原有样式保持不变 */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3; /* 控制按钮在最高层 */
|
||||
pointer-events: auto; /* 启用点击事件 */
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
|
|
@ -1042,17 +937,15 @@ export default {
|
|||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* 加载层 */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10003; /* 加载层级最高 */
|
||||
z-index: 100; /* 加载层在最高层 */
|
||||
pointer-events: auto; /* 阻止底层交互 */
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
|
|
|
|||
Loading…
Reference in New Issue