diff --git a/imageknife/index.ets b/imageknife/index.ets index dcf1bdb..5d0c3ac 100644 --- a/imageknife/index.ets +++ b/imageknife/index.ets @@ -48,7 +48,7 @@ export * from './src/main/ets/components/imageknife/compress/provider/RecoursePr export * from './src/main/ets/components/imageknife/crop/Crop' export * from './src/main/ets/components/imageknife/crop/CropImage' export * from './src/main/ets/components/imageknife/crop/CropOptions' -export {default as PixelMapCrop} from './src/main/ets/components/imageknife/crop/PixelMapCrop' +export * from './src/main/ets/components/imageknife/crop/PixelMapCrop' export * from './src/main/ets/components/imageknife/crop/CropCallback' /** diff --git a/imageknife/src/main/ets/components/imageknife/crop/Crop.ets b/imageknife/src/main/ets/components/imageknife/crop/Crop.ets index cf2a613..fa087f5 100644 --- a/imageknife/src/main/ets/components/imageknife/crop/Crop.ets +++ b/imageknife/src/main/ets/components/imageknife/crop/Crop.ets @@ -15,37 +15,39 @@ import { CropCallback } from './CropCallback' import image from "@ohos.multimedia.image" - +import { BusinessError } from '@ohos.base' export namespace Crop { - export function crop(buf: ArrayBuffer, x: number, y: number, cropWidth: number, cropHeight: number, func?: CropCallback, colorRatio?: number) { + export interface CropSize{ + width:number, + height:number + } + + export function crop(buf: ArrayBuffer, x: number, y: number, cropWidth: number, cropHeight: number, func?: CropCallback, colorRatio?: number) { if (!buf || buf.byteLength <= 0) { console.log("Crop buf is empty"); if (func) { - func("Crop buf is empty", null); + func.cropCallback("Crop buf is empty", null); } return; } - var imageSource = image.createImageSource(buf as any); - getPixelMapSize(imageSource, (error, size: { - width: number, - height: number - }) => { + let imageSource:image.ImageSource = image.createImageSource(buf); + let crop:CropCallback = { cropCallback: (error:BusinessError|string, size: CropSize|null) => { if (!size) { - func(error, null) + func?.cropCallback(error, null) return; } - var pixelMapWidth = size.width; - var pixelMapHeight = size.height; + let pixelMapWidth = size.width; + let pixelMapHeight = size.height; if (x < 0 || x > pixelMapWidth) { - func("Crop error x must be less than pixelMapWidth ", null) + func?.cropCallback("Crop error x must be less than pixelMapWidth ", null) return; } if (y < 0 || y > pixelMapHeight) { - func("Crop error x must be less than pixelMapHeight ", null) + func?.cropCallback("Crop error x must be less than pixelMapHeight ", null) return; } - var options = { + let options: image.DecodingOptions = { editable: true, rotate: 0, desiredSize: { @@ -58,58 +60,57 @@ export namespace Crop { }, } imageSource.createPixelMap(options) - .then((data) => { + .then((data:PixelMap) => { if (colorRatio && colorRatio <= 1) { colorRatioPixelMap(data, pixelMapWidth, pixelMapHeight, colorRatio, func); } else { - func("", data); + func?.cropCallback("", data); } }) - .catch((e) => { - func(e, null); + .catch((e:BusinessError) => { + func?.cropCallback(e, null); }) - }) + } + } + getPixelMapSize(imageSource, crop) } - var colorRatioPixelMap = async (data: any, width: number, height: number, colorRatio: number, func?: CropCallback)=> { + let colorRatioPixelMap = async (data: PixelMap, width: number, height: number, colorRatio: number, func?: CropCallback)=> { if (!data) { - func("colorRatio pixelMap is null", null); + func?.cropCallback("colorRatio pixelMap is null", null); return; } if (colorRatio > 1) { throw new Error("the colorRatio must be <= 1"); } - var buffer = new ArrayBuffer(width * height * 5); - var bytes = new Uint8Array(buffer); - var buffer1B = new ArrayBuffer(width * height * 5); - var bytes1B = new Uint8Array(buffer1B); + let buffer = new ArrayBuffer(width * height * 5); + let bytes = new Uint8Array(buffer); + let buffer1B = new ArrayBuffer(width * height * 5); + let bytes1B = new Uint8Array(buffer1B); - let readPromise = data.readPixelsToBuffer(buffer) + let readPromise:Promise = data.readPixelsToBuffer(buffer) await readPromise; for (let i = 0;i < bytes.length; i++) { bytes1B[i] = bytes[i] * colorRatio; } - let writePromise = data.writeBufferToPixels(buffer1B) + let writePromise:Promise = data.writeBufferToPixels(buffer1B) await writePromise; - func("", data); + func?.cropCallback("", data); } - var getPixelMapSize = (imageSource: any, func: CropCallback<{ - width: number, - height: number - }>)=> { + let getPixelMapSize = (imageSource: image.ImageSource, func: CropCallback)=> { if (!imageSource) { return; } imageSource.getImageInfo((err, value) => { if (err) { - func(err, null) + func.cropCallback(err, null) return; } - var pWidth = value.size.width; - var pHeight = value.size.height; - func('', { width: pWidth, height: pHeight }); + let pWidth = value.size.width; + let pHeight = value.size.height; + func.cropCallback('', { width: pWidth, height: pHeight }); }) } } \ No newline at end of file diff --git a/imageknife/src/main/ets/components/imageknife/crop/CropCallback.ets b/imageknife/src/main/ets/components/imageknife/crop/CropCallback.ets index 1f428e5..04b3a70 100644 --- a/imageknife/src/main/ets/components/imageknife/crop/CropCallback.ets +++ b/imageknife/src/main/ets/components/imageknife/crop/CropCallback.ets @@ -12,6 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { BusinessError } from '@ohos.base' export interface CropCallback { - (err, data: T) + cropCallback:(err:BusinessError|string, data: T)=>void } \ No newline at end of file diff --git a/imageknife/src/main/ets/components/imageknife/crop/CropImage.ets b/imageknife/src/main/ets/components/imageknife/crop/CropImage.ets index aa4c682..578d5c4 100644 --- a/imageknife/src/main/ets/components/imageknife/crop/CropImage.ets +++ b/imageknife/src/main/ets/components/imageknife/crop/CropImage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import {CropOptions} from "../crop/CropOptions"; +import {CropOptions,Size} from "../crop/CropOptions"; @Component export struct CropImage { @@ -35,10 +35,15 @@ export struct CropImage { }) .scale({ x: this._scale, y: this._scale, z: 1.0 }) .gesture(GestureGroup(GestureMode.Parallel, - RotationGesture({ fingers: 1 }).onActionUpdate(event => { - this._rotate = event.angle; - }), PinchGesture({ fingers: 2 }).onActionUpdate(event => { - this._scale = event.scale; + RotationGesture({ fingers: 1 }).onActionUpdate((event?: GestureEvent) => { + if(event != undefined) { + this._rotate = event.angle; + } + }), PinchGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => { + if(event != undefined) { + this._scale = event.scale; + } + }) ).onCancel(() => { console.log("CropImage gesture cancel"); diff --git a/imageknife/src/main/ets/components/imageknife/crop/CropOptions.ets b/imageknife/src/main/ets/components/imageknife/crop/CropOptions.ets index 37e0214..6840094 100644 --- a/imageknife/src/main/ets/components/imageknife/crop/CropOptions.ets +++ b/imageknife/src/main/ets/components/imageknife/crop/CropOptions.ets @@ -12,11 +12,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +export interface Size{ + width: number, + height: number; +} -export class CropOptions { +export interface CropOptions { src: string | PixelMap | Resource; - size: { - width: number, - height: number; - } + size: Size } \ No newline at end of file diff --git a/imageknife/src/main/ets/components/imageknife/crop/PixelMapCrop.ets b/imageknife/src/main/ets/components/imageknife/crop/PixelMapCrop.ets index 5640e08..b629382 100644 --- a/imageknife/src/main/ets/components/imageknife/crop/PixelMapCrop.ets +++ b/imageknife/src/main/ets/components/imageknife/crop/PixelMapCrop.ets @@ -15,11 +15,11 @@ import image from "@ohos.multimedia.image" import { Crop } from './Crop' import { CropCallback } from './CropCallback' - +import { BusinessError } from '@ohos.base' @Component struct PixelMapCrop { - @Watch('watchOptions') @Link options: PixelMapCrop.Options; - @Watch('watchCropTap') @Prop cropTap: boolean; + @Watch('watchOptions') @Link options: Options; + @Watch('watchCropTap') @Prop cropTap: boolean = false; @State bWidth: number = 0; @State bHeight: number = 0; @State cWidth: number = 0; @@ -305,59 +305,60 @@ struct PixelMapCrop { // .backgroundColor('#33000000') .onReady(() => { }) - .onTouch((event: TouchEvent) => { - if (event.type === TouchType.Down) { - // 手指按下 - this.downX = event.touches[0].x; - this.downY = event.touches[0].y; + .onTouch((event?: TouchEvent) => { + if(event != undefined) { + if (event.type === TouchType.Down) { + // 手指按下 + this.downX = event.touches[0].x; + this.downY = event.touches[0].y; - this.lastMoveX = event.touches[0].x; - this.lastMoveY = event.touches[0].y; + this.lastMoveX = event.touches[0].x; + this.lastMoveY = event.touches[0].y; - this.belongRegion() + this.belongRegion() + } + if (event.type === TouchType.Up) { + // 手指放开 + this.downX = 0; + this.downY = 0; + + this.moveX = 0; + this.moveY = 0; + + this.resetTouch(); + + } + if (event.type === TouchType.Move) { + // 手指移动 + this.moveX = event.touches[0].x; + this.moveY = event.touches[0].y; + // 每次移动的delta数据 + let dx = this.moveX - this.lastMoveX; + let dy = this.moveY - this.lastMoveY; + + console.log('PMC this.isTopLeftAreaTouch =' + this.isTopLeftAreaTouch + ' this.isTopRightAreaTouch =' + this.isTopRightAreaTouch + + ' this.isBottomLeftAreaTouch=' + this.isBottomLeftAreaTouch + ' isBottomRightAreaTouch' + this.isBottomRightAreaTouch + + ' dx =' + dx + ' dy =' + dy) + + this.touchLeftTopArea(dx, dy) + this.touchRightTopArea(dx, dy) + this.touchLeftBottomArea(dx, dy) + this.touchRightBottomArea(dx, dy) + + + this.touchTopLineArea(dx, dy) + this.touchLeftLineArea(dx, dy) + this.touchRightLineArea(dx, dy) + this.touchBottomLineArea(dx, dy) + + this.touchMoveCropBox(dx, dy); + + this.lastMoveX = event.touches[0].x + this.lastMoveY = event.touches[0].y + + } } - if (event.type === TouchType.Up) { - // 手指放开 - this.downX = 0; - this.downY = 0; - - this.moveX = 0; - this.moveY = 0; - - this.resetTouch(); - - } - if (event.type === TouchType.Move) { - // 手指移动 - this.moveX = event.touches[0].x; - this.moveY = event.touches[0].y; - // 每次移动的delta数据 - let dx = this.moveX - this.lastMoveX; - let dy = this.moveY - this.lastMoveY; - - console.log('PMC this.isTopLeftAreaTouch =' + this.isTopLeftAreaTouch + ' this.isTopRightAreaTouch =' + this.isTopRightAreaTouch - + ' this.isBottomLeftAreaTouch=' + this.isBottomLeftAreaTouch + ' isBottomRightAreaTouch' + this.isBottomRightAreaTouch - + ' dx =' + dx + ' dy =' + dy) - - this.touchLeftTopArea(dx, dy) - this.touchRightTopArea(dx, dy) - this.touchLeftBottomArea(dx, dy) - this.touchRightBottomArea(dx, dy) - - - this.touchTopLineArea(dx, dy) - this.touchLeftLineArea(dx, dy) - this.touchRightLineArea(dx, dy) - this.touchBottomLineArea(dx, dy) - - this.touchMoveCropBox(dx, dy); - - this.lastMoveX = event.touches[0].x - this.lastMoveY = event.touches[0].y - - } - }) } @@ -785,46 +786,46 @@ struct PixelMapCrop { } } -namespace PixelMapCrop { - - - export class Options { - width: number; - height: number; - pixelMap: PixelMap; +export class Options { + width: number = 0; + height: number = 0; + pixelMap?: PixelMap = undefined; // 是否需要绘制线 - hasGuideLine: boolean; - pixelBuffer: ArrayBuffer; + hasGuideLine: boolean = false; + pixelBuffer: ArrayBuffer = new ArrayBuffer(0); // 展示pixel宽度 - pixelWidth: number; + pixelWidth: number = 0; // 展示pixel高度 - pixelHeight: number; + pixelHeight: number = 0; // 缩放scale:center-inside类型缩放的比例 - pixelScale: number; + pixelScale: number = 1; // 用户裁剪后的回调 - cropFunction: Function; + cropFunction: (error:BusinessError, pixelmap:PixelMap, sx:number, sy:number) => void = (error:BusinessError, pixelmap:PixelMap, sx:number, sy:number)=>{}; // 本地裁剪框 回调 - cropAction: Function; + cropAction: (topLeftPoint:number[], bottomRightPoint:number[], scaleInside:number) =>void = (topLeftPoint:number[], bottomRightPoint:number[], scaleInside:number)=>{}; constructor() { } // 裁剪动作 - setCropFunction(crop: (error, pixelmap, sx, sy) => void) { + setCropFunction(crop: (error:BusinessError, pixelmap:PixelMap, sx:number, sy:number) => void) { this.cropFunction = crop; - this.cropAction = (topLeftPoint, bottomRightPoint, scaleInside) => { - let dx = vp2px(1) * topLeftPoint[0] * 1.0 / scaleInside; - let dy = vp2px(1) * topLeftPoint[1] * 1.0 / scaleInside; - let sx = vp2px(1) * (bottomRightPoint[0] - topLeftPoint[0]) * 1.0 / scaleInside; - let sy = vp2px(1) * (bottomRightPoint[1] - topLeftPoint[1]) * 1.0 / scaleInside; - Crop.crop(this.pixelBuffer, dx, dy, sx, sy, (error, pixelmap) => { - this.cropFunction(error, pixelmap, sx, sy) + this.cropAction = (topLeftPoint:number[], bottomRightPoint:number[], scaleInside:number) => { + let dx:number = vp2px(1) * topLeftPoint[0] * 1.0 / scaleInside; + let dy:number = vp2px(1) * topLeftPoint[1] * 1.0 / scaleInside; + let sx:number = vp2px(1) * (bottomRightPoint[0] - topLeftPoint[0]) * 1.0 / scaleInside; + let sy:number = vp2px(1) * (bottomRightPoint[1] - topLeftPoint[1]) * 1.0 / scaleInside; + Crop.crop(this.pixelBuffer, dx, dy, sx, sy, { + cropCallback: (error: BusinessError | string, pixelmap: PixelMap | null) => { + this.cropFunction(error, pixelmap, sx, sy) + } }, 1); + } return this; @@ -857,7 +858,7 @@ namespace PixelMapCrop { //数据赋值 this.pixelBuffer = buffer; - let imageSource = image.createImageSource(buffer as any); + let imageSource:image.ImageSource = image.createImageSource(buffer); imageSource.getImageInfo().then((imageInfo) => { //获取宽高 @@ -879,7 +880,7 @@ namespace PixelMapCrop { this.pixelWidth = imageInfo.size.width * scaleInside; this.pixelHeight = imageInfo.size.height * scaleInside; - let options = { + let options:image.DecodingOptions = { editable: true, rotate: 0, desiredSize: { @@ -887,7 +888,7 @@ namespace PixelMapCrop { height: imageInfo.size.height * scaleInside, } } - imageSource.createPixelMap(options).then((pixelmap) => { + imageSource.createPixelMap(options).then((pixelmap:PixelMap) => { this.pixelMap = pixelmap; if (readyCrop) { readyCrop(); @@ -898,6 +899,6 @@ namespace PixelMapCrop { } } -} -export default PixelMapCrop; + +