diff --git a/README.en.md b/README.en.md index 3cf064b94ee08963820c4c20b29d2abe635db397..07a74326560ac07a0e33589d017b34c149729be4 100644 --- a/README.en.md +++ b/README.en.md @@ -28,7 +28,9 @@ Learn how to edit images based on image encoding and decoding, including croppin ``` ├──ets │ ├──common -│ │ └──CommonConstants.ets // constant +│ │ └──constant +│ │ └──constant +│ │ └──CommonConstants.ts // Constant │ ├──component │ │ ├──TabComponent.ets // Bottom tab bar component │ │ └──TitleComponent.ets // Top title bar components @@ -40,25 +42,27 @@ Learn how to edit images based on image encoding and decoding, including croppin │ ├──pages │ │ └──PictureEdit.ets // Main edit page │ ├──utils -│ │ ├──AdjustUtil.ets // Adjust utilities -│ │ ├──CropUtil.ets // Crop utilities -│ │ ├──DecodeUtil.ets // Decode utilities -│ │ ├──EncodeUtil.ets // Encode utilities +│ │ ├──AdjustUtil.ets // Adjust utils +│ │ ├──CropUtil.ets // Crop utils +│ │ ├──DecodeUtil.ets // Decode utils +│ │ ├──EncodeUtil.ets // Encode utils │ │ ├──LoggerUtil.ets // Logger utilities -│ │ └──OpacityUtil.ets // Opacity utilities +│ │ └──OpacityUtil.ets // Opacity utils │ ├──view -│ │ ├──AdjustContentView.ets // Adjust component -│ │ ├──ApplyFilterView.ets // Filter component -│ │ ├──PhotoPicker.ets // Photo picker component +│ │ ├──PixelDataManager.ets // Pixel Data +│ │ ├──AdjustContentView.ets // Adjust +│ │ ├──CropView.ets // Crop +│ │ ├──TranslateView.ets // Translate +│ │ ├──ZoomView.ets // Zoom +│ │ ├──ApplyFilterView.ets // Apply Filter │ │ └──WatermarkView.ets // Watermark component │ ├──viewModel -│ │ ├──IconListViewModel.ets // Icon list model -│ │ ├──MessageItem.ets // Message item model +│ │ ├──IconListViewModel.ets // icon Model +│ │ ├──MessageItem.ets // MessageItem Model │ │ ├──OptionViewModel.ets // Option model -│ │ └──RegionItem.ets // Region item model +│ │ └──RegionItem.ets │ └──workers -│ ├──AdjustBrightnessWork.ets // Brightness adjustment worker -│ └──AdjustSaturationWork.ets // Saturation adjustment worker +│ └──AdjustWork.ets // worker └──resources ``` diff --git a/README.md b/README.md index cf9773b044fcda0b935765748675c72fedc59cac..ef8d8c841bd9e8bbe6e0aeb503e1a5e80b0fff82 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,9 @@ ``` ├──ets │ ├──common -│ │ └──CommonConstants.ets // 常量 +│ │ └──constant +│ │ └──constant +│ │ └──CommonConstants.ts // 常量 │ ├──component │ │ ├──TabComponent.ets // 底部Tab栏组件 │ │ └──TitleComponent.ets // 顶部标题栏组件 @@ -40,27 +42,27 @@ │ ├──pages │ │ └──PictureEdit.ets // 主编辑页面 │ ├──utils -│ │ ├──AdjustUtil.ets // 调节工具类 -│ │ ├──CropUtil.ets // 裁剪工具类 -│ │ ├──DecodeUtil.ets // 解码工具类 -│ │ ├──EncodeUtil.ets // 编码工具类 -│ │ ├──LoggerUtil.ets // 日志工具类 -│ │ └──OpacityUtil.ets // 透明度工具类 +│ │ ├──AdjustUtil.ets // 调节utils +│ │ ├──CropUtil.ets // 裁剪utils +│ │ ├──DecodeUtil.ets // 解码utils +│ │ ├──EncodeUtil.ets // 编码utils +│ │ ├──LoggerUtil.ets // 日志utils +│ │ └──OpacityUtil.ets // 透明utils │ ├──view -│ │ ├──AdjustContentView.ets // 调节功能组件 -│ │ ├──ApplyFilterView.ets // 滤镜功能组件 -│ │ ├──PhotoPicker.ets // 选图组件 +│ │ ├──PixelDataManager.ets // 实例 +│ │ ├──AdjustContentView.ets // 调节组件 +│ │ ├──CropView.ets // 裁剪组件 +│ │ ├──TranslateView.ets // 平移组件 +│ │ ├──ZoomView.ets // 缩放组件 +│ │ ├──ApplyFilterView.ets // 滤镜组件 │ │ └──WatermarkView.ets // 水印功能组件 │ ├──viewModel -│ │ ├──IconListViewModel.ets // 图标列表模型 -│ │ ├──MessageItem.ets // 消息项模型 -│ │ ├──OptionViewModel.ets // 操作选项枚举 -│ │ ├──PictureEditModel.ets // 首页列模型 -│ │ ├──PictureEditModelData.ets // 首页数据类 -│ │ └──RegionItem.ets // 区域项模型 +│ │ ├──IconListViewModel.ets // icon Model +│ │ ├──MessageItem.ets // 多线程传输消息 +│ │ ├──OptionViewModel.ets // 操作枚举 +│ │ └──RegionItem.ets │ └──workers -│ ├──AdjustBrightnessWork.ets // 亮度调节工作线程 -│ └──AdjustSaturationWork.ets // 饱和度调节工作线程 +│ └──AdjustWork.ets // 线程 └──resources ``` diff --git a/entry/src/main/ets/component/TabComponent.ets b/entry/src/main/ets/component/TabComponent.ets index 9308715fbcec4cc7e51d7bd8e436f04e5fd8ad78..bf863d0bba68c3bacf06aa5865ab62b727a3153b 100644 --- a/entry/src/main/ets/component/TabComponent.ets +++ b/entry/src/main/ets/component/TabComponent.ets @@ -170,6 +170,7 @@ export struct TabComponent { @Consume('pixelMapInit') pixelMapInit?: image.PixelMap; @Consume previewPixelMap: image.PixelMap; @Consume cropPixelMap: image.PixelMap; + @Consume cropInitPixelMap: image.PixelMap; @Consume adjustPixelMap: image.PixelMap; @Consume isInitTranslateValue: boolean; @Consume translateX: number; @@ -178,6 +179,8 @@ export struct TabComponent { }; flushPixelMapChange: () => void = () => { }; + getCropInitPixelMap: () => void = () => { + }; reset: () => void = () => { }; drawTranslate: (x: number, y: number) => void = (x, y) => { @@ -293,6 +296,9 @@ export struct TabComponent { // Crop image async cropImage(proportion: CropType) { try { + if (proportion === CropType.ORIGINAL_IMAGE) { + this.pixelMapManager?.updateTranslationEndPx(this.cropInitPixelMap); + } await this.pixelMapManager?.cropImage(proportion); this.flushPixelMapChange(); } catch (error) { @@ -535,6 +541,9 @@ export struct TabComponent { if (this.waterShow === false && index === 5) { this.waterShow = true; } + if (index === 0) { + this.getCropInitPixelMap(); + } }) .onChange((index: number) => { if (this.currentEditMode === EditMode.CROP_MODE && this.currentCropMode !== 0) { diff --git a/entry/src/main/ets/component/TitleComponent.ets b/entry/src/main/ets/component/TitleComponent.ets index 819a7d6d0ff6441baf8d4a26adf85675dcd7dd29..daaf42d3d51a41ae274c26d49393e7d3387be022 100644 --- a/entry/src/main/ets/component/TitleComponent.ets +++ b/entry/src/main/ets/component/TitleComponent.ets @@ -72,7 +72,6 @@ export struct TitleComponent { try { const imageToProcess = (this.filterCurrIndex > 0 && this.filterPixelMap) ? this.filterPixelMap : this.pixelMap; const imageInfo = await this.previewPixelMap.getImageInfo(); - console.log('test==imageInfo', JSON.stringify(imageInfo)) const imageWidth = imageInfo.size.width; const imageHeight = imageInfo.size.height; diff --git a/entry/src/main/ets/pages/PictureEdit.ets b/entry/src/main/ets/pages/PictureEdit.ets index 8d4afa5c4b7289dcbf2098b5089f21abe0f1d589..0db23ef257332d969fc1397c851cbc1b92325ff0 100644 --- a/entry/src/main/ets/pages/PictureEdit.ets +++ b/entry/src/main/ets/pages/PictureEdit.ets @@ -84,6 +84,7 @@ struct PictureEdit { @Provide filterPixelMap?: image.PixelMap = undefined; @Provide savePixelMap?: image.PixelMap = undefined; @Provide cropPixelMap?: image.PixelMap = undefined; + @Provide cropInitPixelMap?: image.PixelMap = undefined; @Provide adjustPixelMap?: image.PixelMap = undefined; @Provide filterCurrIndex: number = 0; @Provide translateX: number = 0; @@ -226,7 +227,7 @@ struct PictureEdit { let uri = '' let imageSource = image.createImageSource(await getResourceFd(this.getUIContext(), uri)); const px = await decodePixelMapFromImageSource(imageSource); - this.pixelMap = px + this.pixelMap = this.cropInitPixelMap = px this.pixelMapManager = new PixelMapManager(px!, (pixelMap: image.PixelMap) => { this.previewPixelMap = pixelMap }) @@ -341,6 +342,11 @@ struct PictureEdit { this.triggerCanvasRedraw(); } + getCropInitPixelMap() { + this.cropInitPixelMap = this.canvasRenderingContext.getPixelMap(0, 0, this.containerWidth, this.containerHeight); + this.pixelMapManager?.updateTranslationEndPx(this.cropInitPixelMap); + } + @Builder infoBuilder() { Column() { @@ -461,6 +467,9 @@ struct PictureEdit { flushPixelMapChange: () => { this.flushPixelMapChange() }, + getCropInitPixelMap: () => { + this.getCropInitPixelMap() + }, reset: () => { this.reset() }, diff --git a/entry/src/main/ets/pages/PixelMapManager.ets b/entry/src/main/ets/pages/PixelMapManager.ets index 163ec029be45766bd93341b99348bff5cfe3cb07..bee3296d90921032f9b46e0cd0fc19269f42968c 100644 --- a/entry/src/main/ets/pages/PixelMapManager.ets +++ b/entry/src/main/ets/pages/PixelMapManager.ets @@ -56,6 +56,7 @@ export class PixelMapManager { private startEditPixelMap?: PixelMap; private finalEditPixelMap?: PixelMap; private originPixelMap?: PixelMap; + private cropPixelMap?: PixelMap; private editMode: EditType = EditType.CROP; private notifyPreviewUpdate: (previewPixelMap: PixelMap) => void; private adjustWorker: worker.ThreadWorker = new worker.ThreadWorker(CommonConstants.ADJUST_WORKER_FILE); @@ -74,6 +75,10 @@ export class PixelMapManager { return this.originPixelMap!; } + getInitCropPixelMap() { + return this.startEditPixelMap!; + } + getStartPixelMap() { return this.startEditPixelMap!; } @@ -153,7 +158,8 @@ export class PixelMapManager { /** * Calculate watermark position */ - private calculateWatermarkPosition(imageWidth: number, imageHeight: number, textWidth: number, textHeight: number, position: WatermarkPosition): PositionResult { + private calculateWatermarkPosition(imageWidth: number, imageHeight: number, textWidth: number, textHeight: number, + position: WatermarkPosition): PositionResult { const padding = 20; switch (position) { @@ -269,6 +275,10 @@ export class PixelMapManager { } } + updateTranslationEndPx(pixelMap: image.PixelMap) { + this.finalEditPixelMap = pixelMap; + } + async cropImage(proportion: CropType) { const px = this.getStartEditPixelMap(EditType.CROP); const imageInfo = await px.getImageInfo();