From fb613384d2e3ed4bd56029eca1cab42a8ada4549 Mon Sep 17 00:00:00 2001 From: zhanghongchuan33 Date: Tue, 21 Jun 2022 14:36:19 +0800 Subject: [PATCH 1/2] fix ux Signed-off-by: zhanghongchuan33 --- .../featurecommon/zoomview/ZoomView.ets | 55 ++++++++++++++----- product/phone/src/main/ets/pages/index.ets | 5 +- 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets index 2b70241..c72dc97 100644 --- a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets +++ b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets @@ -236,12 +236,12 @@ export struct ZoomView { this.photoExtendOffCanvasContext.clearRect(0, 0, this.extendCanvasWidth, this.canvasHeight) this.photoExtendOffCanvasContext.strokeStyle = '#ffffff' this.photoExtendOffCanvasContext.fillStyle = '#ffffff' - this.photoExtendOffCanvasContext.lineWidth = 2 + this.photoExtendOffCanvasContext.lineWidth = 1.5 this.photoExtendOffCanvasContext.beginPath() this.photoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28) this.photoExtendOffCanvasContext.stroke() this.photoExtendOffCanvasContext.beginPath() - this.photoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28) + this.photoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius + 0.5, 0, 6.28) this.photoExtendOffCanvasContext.fill() let spotCount = (this.extendCanvasWidth - this.getPadding() * 2 - this.mainDotRadius * 4 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2 @@ -251,22 +251,29 @@ export struct ZoomView { if (i === 0) { spotRadius = this.mainDotRadius spotCenter = this.getPadding() + spotRadius - this.photoExtendOffCanvasContext.font = '8' + this.photoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' this.photoExtendOffCanvasContext.textAlign = 'center' this.photoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) } else if (i === spotCount - 1) { spotRadius = this.mainDotRadius spotCenter = this.extendCanvasWidth - this.getPadding() - spotRadius - this.photoExtendOffCanvasContext.font = '8' + this.photoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' this.photoExtendOffCanvasContext.textAlign = 'center' + this.photoExtendOffCanvasContext.fillStyle = '#ffffff' this.photoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) } else { spotRadius = this.secDotRadius spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing } if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) { + if (spotCenter == this.getPadding() + spotRadius || spotCenter == this.extendCanvasWidth - this.getPadding() - spotRadius) { + this.photoExtendOffCanvasContext.beginPath() + this.photoExtendOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.photoExtendOffCanvasContext.fill() + } this.photoExtendOffCanvasContext.beginPath() this.photoExtendOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.photoExtendOffCanvasContext.fillStyle = '#4dffffff' this.photoExtendOffCanvasContext.fill() } this.photoExtendCanvasContext.transferFromImageBitmap(this.photoExtendOffCanvasContext.transferToImageBitmap()) @@ -290,16 +297,16 @@ export struct ZoomView { this.videoExtendOffCanvasContext.clearRect(0, 0, this.extendCanvasWidth, this.canvasHeight) this.videoExtendOffCanvasContext.strokeStyle = '#ffffff' this.videoExtendOffCanvasContext.fillStyle = '#ffffff' - this.videoExtendOffCanvasContext.lineWidth = 2 + this.videoExtendOffCanvasContext.lineWidth = 1.5 this.videoExtendOffCanvasContext.beginPath() this.videoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28) this.videoExtendOffCanvasContext.stroke() if (this.state.isShowZoomText) { this.videoExtendOffCanvasContext.beginPath() - this.videoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius, 0, 6.28) + this.videoExtendOffCanvasContext.arc(this.getZoomBtnCenterX(), this.canvasHeight / 2, this.centerDotRadius + 0.5, 0, 6.28) this.videoExtendOffCanvasContext.fill() } else { - this.videoExtendOffCanvasContext.font = '10' + this.videoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' this.videoExtendOffCanvasContext.textAlign = 'center' this.videoExtendOffCanvasContext.fillText(this.getZoomText(), this.getZoomBtnCenterX(), this.canvasHeight / 2 + 5) } @@ -311,13 +318,14 @@ export struct ZoomView { if (i === 0) { spotRadius = this.mainDotRadius spotCenter = this.getPadding() + spotRadius - this.videoExtendOffCanvasContext.font = '8' + this.videoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' this.videoExtendOffCanvasContext.textAlign = 'center' this.videoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) } else if (i === spotCount - 1) { spotRadius = this.mainDotRadius spotCenter = this.extendCanvasWidth - this.getPadding() - spotRadius - this.videoExtendOffCanvasContext.font = '8' + this.videoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' + this.videoExtendOffCanvasContext.fillStyle = '#ffffff' this.videoExtendOffCanvasContext.textAlign = 'center' this.videoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) } else { @@ -325,8 +333,17 @@ export struct ZoomView { spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing } if (spotCenter < this.getZoomBtnCenterX() - this.getZoomBtnRadius() || spotCenter > this.getZoomBtnCenterX() + this.getZoomBtnRadius()) { +// this.videoExtendOffCanvasContext.beginPath() +// this.videoExtendOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) +// this.videoExtendOffCanvasContext.fill() + if (spotCenter == this.getPadding() + spotRadius || spotCenter == this.extendCanvasWidth - this.getPadding() - spotRadius) { + this.videoExtendOffCanvasContext.beginPath() + this.videoExtendOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.videoExtendOffCanvasContext.fill() + } this.videoExtendOffCanvasContext.beginPath() this.videoExtendOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.videoExtendOffCanvasContext.fillStyle = '#4dffffff' this.videoExtendOffCanvasContext.fill() } } @@ -364,16 +381,16 @@ export struct ZoomView { this.foldOffCanvasContext.clearRect(0, 0, this.foldCanvasWidth, this.canvasHeight) this.foldOffCanvasContext.strokeStyle = '#ffffff' this.foldOffCanvasContext.fillStyle = '#ffffff' - this.foldOffCanvasContext.lineWidth = 2 + this.foldOffCanvasContext.lineWidth = 1.5 this.foldOffCanvasContext.beginPath() this.foldOffCanvasContext.arc(this.foldCanvasWidth / 2, this.canvasHeight / 2, this.getZoomBtnRadius(), 0, 6.28) this.foldOffCanvasContext.stroke() - this.foldOffCanvasContext.font = '10' + this.foldOffCanvasContext.font = 'normal bold 30px sans-serif' this.foldOffCanvasContext.textAlign = 'center' - this.foldOffCanvasContext.fillText(this.getZoomText(), this.foldCanvasWidth / 2, this.canvasHeight / 2 + 5) + this.foldOffCanvasContext.fillText(this.getZoomText(), this.foldCanvasWidth / 2 - 0.5, this.canvasHeight / 2 + 3.5) let fullWidth = this.foldCanvasWidth / 2 - this.mainDotRadius - let spotCount = (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) + 2 + let spotCount = (fullWidth - this.mainDotRadius * 2 - this.dotSpacing) / (this.dotSpacing + this.secDotRadius * 2) - 1 let spotOffset = this.foldCanvasWidth / 2 - ((this.state.zoomRatio - this.state.minZoomRatio) / (this.state.maxZoomRatio - this.state.minZoomRatio) * fullWidth) Log.warn(`${this.TAG} track debug foldCanvasWidth: ${this.foldCanvasWidth}, fullWidth: ${fullWidth}, spotCount: ${spotCount}, spotOffset: ${spotOffset}`) for (let i = 0; i < spotCount; i++) { @@ -386,16 +403,28 @@ export struct ZoomView { } else if (i === spotCount - 1) { spotRadius = this.mainDotRadius spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius - this.secDotRadius + spotRadius + this.foldOffCanvasContext.fillStyle = '#ffffff' Log.warn(`${this.TAG} track debug X spotCenter: ${spotCenter}`) } else { spotRadius = this.secDotRadius spotCenter = spotOffset + this.mainDotRadius * 2 + (i - 1) * this.dotSpacing + (2 * i - 1) * this.secDotRadius + spotRadius + Log.warn(`${this.TAG} track debug Z spotCenter: ${spotCenter}`) } if (spotCenter < this.foldCanvasWidth / 2 - this.getZoomBtnRadius() || spotCenter > this.foldCanvasWidth / 2 + this.getZoomBtnRadius()) { +// this.foldOffCanvasContext.beginPath() +// this.foldOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) +// this.foldOffCanvasContext.fill() + if (spotCenter == 84.5) { + this.foldOffCanvasContext.beginPath() + this.foldOffCanvasContext.arc(84.5, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.foldOffCanvasContext.fill() + } this.foldOffCanvasContext.beginPath() this.foldOffCanvasContext.arc(spotCenter, this.canvasHeight / 2, spotRadius, 0, 6.28) + this.foldOffCanvasContext.fillStyle = '#4dffffff' this.foldOffCanvasContext.fill() } + } this.foldCanvasContext.transferFromImageBitmap(this.foldOffCanvasContext.transferToImageBitmap()) diff --git a/product/phone/src/main/ets/pages/index.ets b/product/phone/src/main/ets/pages/index.ets index d04c0c5..96740fb 100644 --- a/product/phone/src/main/ets/pages/index.ets +++ b/product/phone/src/main/ets/pages/index.ets @@ -14,6 +14,7 @@ */ import display from '@ohos.display' +import deviceInfo from '@ohos.deviceInfo'; import { Action } from '../../../../../../common/src/main/ets/default/redux/actions/Action' import { CameraWorker } from '../../../../../../common/src/main/ets/default/worker/CameraWorker' @@ -232,7 +233,9 @@ struct Index { Stack({alignContent: Alignment.Bottom}) { Column() { if (this.state.mode === "PHOTO" || this.state.mode === "VIDEO") { -// ZoomView() + if (deviceInfo.deviceType === "phone") { + ZoomView() + } } if (this.state.videoState === "beforeTakeVideo" && this.state.showZoomLabelValue) { Control() -- Gitee From 7a26c8c62ce5782580520e42713364291ae6ba8d Mon Sep 17 00:00:00 2001 From: zhanghongchuan33 Date: Tue, 21 Jun 2022 15:44:39 +0800 Subject: [PATCH 2/2] fix ux Signed-off-by: zhanghongchuan33 --- .../default/featurecommon/zoomview/ZoomView.ets | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets index c72dc97..43321ba 100644 --- a/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets +++ b/common/src/main/ets/default/featurecommon/zoomview/ZoomView.ets @@ -251,16 +251,16 @@ export struct ZoomView { if (i === 0) { spotRadius = this.mainDotRadius spotCenter = this.getPadding() + spotRadius - this.photoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' + this.photoExtendOffCanvasContext.font = 'normal bold 32px sans-serif' this.photoExtendOffCanvasContext.textAlign = 'center' - this.photoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) + this.photoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 28) } else if (i === spotCount - 1) { spotRadius = this.mainDotRadius spotCenter = this.extendCanvasWidth - this.getPadding() - spotRadius - this.photoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' + this.photoExtendOffCanvasContext.font = 'normal bold 32px sans-serif' this.photoExtendOffCanvasContext.textAlign = 'center' this.photoExtendOffCanvasContext.fillStyle = '#ffffff' - this.photoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) + this.photoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 28) } else { spotRadius = this.secDotRadius spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing @@ -318,16 +318,16 @@ export struct ZoomView { if (i === 0) { spotRadius = this.mainDotRadius spotCenter = this.getPadding() + spotRadius - this.videoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' + this.videoExtendOffCanvasContext.font = 'normal bold 32px sans-serif' this.videoExtendOffCanvasContext.textAlign = 'center' - this.videoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) + this.videoExtendOffCanvasContext.fillText(`${this.state.minZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 28) } else if (i === spotCount - 1) { spotRadius = this.mainDotRadius spotCenter = this.extendCanvasWidth - this.getPadding() - spotRadius - this.videoExtendOffCanvasContext.font = 'normal bold 30px sans-serif' + this.videoExtendOffCanvasContext.font = 'normal bold 32px sans-serif' this.videoExtendOffCanvasContext.fillStyle = '#ffffff' this.videoExtendOffCanvasContext.textAlign = 'center' - this.videoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 24) + this.videoExtendOffCanvasContext.fillText(`${this.state.maxZoomRatio}x`, spotCenter, this.canvasHeight / 2 - 28) } else { spotRadius = this.secDotRadius spotCenter = this.getPadding() + this.mainDotRadius + (2 * i - 1) * this.secDotRadius + i * this.dotSpacing -- Gitee