HarmonyOS第三方组件——鸿蒙图片裁剪组件ohos-Image-Cropper
前言
基于安卓的平臺(tái)的圖片裁剪組件（https://github.com/ArthurHub/Android-Image-Cropper），實(shí)現(xiàn)了鴻蒙平臺(tái)的遷移和重構(gòu)，代碼已經(jīng)開源到（https://gitee.com/isrc_ohos/android-image-cropper_ohos），歡迎各位開發(fā)者下載使用并提出寶貴意見(jiàn)~
背景
ohos-Image-Cropper組件是個(gè)簡(jiǎn)單、靈活、高效的圖片裁剪工具，支持圖片在裁剪前進(jìn)行裁剪框移動(dòng)、旋轉(zhuǎn)、翻轉(zhuǎn)（水平、垂直）的操作，并將最終裁剪結(jié)果反饋給用戶。
Sample解析
在Sample中，向用戶提供了三個(gè)界面，分別是：初始界面、功能選擇界面、效果展示界面。初始界面包含一個(gè)按鈕，點(diǎn)擊可進(jìn)入功能選擇界面。功能選擇界面可對(duì)圖片進(jìn)行裁剪、旋轉(zhuǎn)、水平翻轉(zhuǎn)、垂直翻轉(zhuǎn)等操作。當(dāng)用戶選擇圖片裁剪功能時(shí)，會(huì)跳轉(zhuǎn)到效果展示界面，展示裁剪后的圖片。
1. 如何跳轉(zhuǎn)至功能選擇界面？
CropImage是個(gè)工具類，可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能。此處可以將下面代碼放入Button按鈕的點(diǎn)擊事件中，執(zhí)行下面代碼可以實(shí)現(xiàn)從用戶的初始界面跳轉(zhuǎn)至功能選擇界面。
CropImage.activity() ?//初始化CropImage類 ? ? ? ? .setContext(this)//設(shè)置上下文 ? ? ? ? ? ? ? .setSource(ResourceTable.Media_baochi)//傳入被裁減圖片的ID ? ? ? ? .setBundleName("com.huawei.mytestproject")//傳入包名 ? ? ? ? .setAbilityName("com.huawei.mytestproject.MainAbility")//傳入類名 ? ? ? ? .setRequset_code(1234)//請(qǐng)求參數(shù)設(shè)置 ? ? ? ? .start(super.getAbility(),this);//啟動(dòng)跳轉(zhuǎn)關(guān)于上代碼有三點(diǎn)需要注意，一是：為了方便大家使用模擬器運(yùn)行Sample，被裁減圖片使用在鴻蒙的資源管理器ResourceTable中注冊(cè)過(guò)的圖片。圖片需放在APP項(xiàng)目資源文件夾resource/base/media下面，ResourceTable會(huì)掃描資源文件夾，并為每個(gè)資源注冊(cè)一個(gè)int型的數(shù)值作為資源id。圖1展示了圖片所在位置，圖二展示了圖片在ResourceTable中的注冊(cè)。二是：代碼中傳入的包名和類名是用于指定圖片裁剪后返回的Ability（即效果展示界面）。三是：被裁減圖片必須為正方形。
圖1. 被裁減圖片存放位置
圖2. 被裁減圖片在ResourceTable中的注冊(cè)
2. 如何跳轉(zhuǎn)至效果展示界面？
當(dāng)裁剪完畢時(shí)，會(huì)根據(jù)用戶提供的包名和類名跳轉(zhuǎn)至效果展示界面，來(lái)展示裁剪后的圖片。具體使用代碼參照如下：
//裁剪方法 private void crop(Intent intentOriginal) { ... ? ? Intent intent = new Intent(); ... ? ? Operation operation = new Intent.OperationBuilder() ? ? ? ? ? ? .withDeviceId("") ? ? ? ? ? ?//指定圖片裁剪后返回的Ability包名和類名 ? ? ? ? ? ? .withBundleName(intentOriginal.getStringParam("bundleName")) ? ? ? ? ? ? .withAbilityName(intentOriginal.getStringParam("abilityName")) ? ? ? ? ? ? .build(); ? ? intent.setOperation(operation);// 把operation設(shè)置到intent中 ? startAbility(intent);//跳轉(zhuǎn)方法 }3. 如何獲得裁剪圖片？ ? ?
裁剪后的圖片是位圖格式PixelMap（原因見(jiàn)Library解析），本節(jié)介紹了裁剪后位圖的兩種獲取方法。
方法一 ?
CropImage.handleImage(int result_code , Component image);
此方法需要傳入一個(gè)新創(chuàng)建的Component，用以接收被裁剪后的位圖，用戶后續(xù)可以把Component加入到自己的布局中進(jìn)行顯示。 其中result_code為結(jié)果參數(shù)，通過(guò)這個(gè)參數(shù)判斷裁剪是否成功。參數(shù)result_code可以從intent中獲得，如下面一行代碼所示：
int result_code = result.getIntParam("result_code" , 0);
方法二 ?
PixelMap croppedPixelMap = CropImage.getCroppedPixelMap();
此方法可以返回裁剪后的位圖，用戶可以根據(jù)需要自行處理。
4. Sample效果
（1）初始界面跳轉(zhuǎn)至功能選擇界面 通過(guò)點(diǎn)擊startCrop按鈕進(jìn)入功能選擇界面，如圖3所示。
圖3 初始界面跳轉(zhuǎn)至功能選擇界面
（2）功能選擇界面跳轉(zhuǎn)至效果展示界面 裁剪成功后，將跳轉(zhuǎn)至效果展示界面，如圖4所示。此時(shí)startCrop按鈕依然存在，可以繼續(xù)對(duì)圖片進(jìn)行裁剪。
圖4 功能選擇界面跳轉(zhuǎn)至效果展示界面
裁剪取消后跳轉(zhuǎn)至效果展示界面，如圖5所示。
圖5 裁剪取消后跳轉(zhuǎn)至效果展示界面
Library解析
Library解析部分重點(diǎn)介紹本組件核心功能的實(shí)現(xiàn)原理，包括圖片裁剪、裁剪框移動(dòng)、圖片旋轉(zhuǎn)、圖片翻轉(zhuǎn)（水平、垂直）四個(gè)功能。
1. 圖片裁剪
圖6 圖片裁剪的原理 ? ?
圖片裁剪的主要原理是解碼和坐標(biāo)對(duì)應(yīng)，以下通過(guò)三個(gè)步驟對(duì)裁剪的過(guò)程進(jìn)行詳細(xì)講解：
1） 如圖6所示，被裁減的圖片①為JPG格式（目前支持JPEG、PNG、GIF、HEIF、WebP和BMP格式），不可以直接用于圖像裁剪、翻轉(zhuǎn)、旋轉(zhuǎn)等操作，因此，采用工具類ImageSource將JPG圖片解碼為對(duì)應(yīng)的位圖②，用戶可以直接對(duì)位圖進(jìn)行上述操作。
//實(shí)例化一個(gè)資源選項(xiàng)類 ImageSource.SourceOptions options = new ImageSource.SourceOptions(); //選擇解碼jpg圖片 options.formatHint = "image/jpg"; //實(shí)例化一個(gè)解碼選項(xiàng) ImageSource.DecodingOptions decodingOptions = new ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ImageSource.DecodingOptions(); ? ? ? ? ? ? ? //設(shè)置解碼后的位圖為可以編輯 decodingOptions.editable = true; //解碼選項(xiàng)可以傳入一個(gè)矩形，如果不傳，默認(rèn)解碼完整的圖片 //decodingOptions.desiredRegion = new Rect(0 , 0 , 100 , 100); try { Resource asset = assetManager.openRawFile(); ? ? ?//圖片資源 ImageSource source = ImageSource.create(asset, options); ? ? ?//返回解碼后的位圖 ?return Optional.ofNullable(source.createPixelmap(decodingOptions)).get(); }...2） 在位圖②中，用戶拖動(dòng)裁剪框選擇需要裁剪的位置，此位置確定后按照坐標(biāo)原理映射到JPG圖片①中，如①中的虛線裁剪框所示。 ? ?
圖片在裁剪之前，若沒(méi)有發(fā)生旋轉(zhuǎn)、翻轉(zhuǎn)等操作，實(shí)線裁剪框在位圖中的位置和虛線裁剪框在JPG圖中的位置是一樣的，此時(shí)JPG圖片中的裁剪區(qū)域獲取較為簡(jiǎn)單。 ? ?
圖片在裁剪前發(fā)生旋轉(zhuǎn)、翻轉(zhuǎn)等操作時(shí)，采用圖7所示的方法獲取JPG圖片中的裁剪區(qū)域。以裁剪前圖片順時(shí)針旋轉(zhuǎn)90度為例，將圖片所在坐標(biāo)系的左上、右上、右下、左下的點(diǎn)分別設(shè)置為：0、1、2、3，定義圖片的左上角為A點(diǎn)，左下角為B點(diǎn)，此時(shí)A=0、B=3。當(dāng)圖片順時(shí)針旋轉(zhuǎn)90度以后，圖片的A點(diǎn)轉(zhuǎn)到了右上角，B點(diǎn)轉(zhuǎn)到了左上角，此時(shí)A=1、B=0。 ? ?
由此方法可以推算出AB邊的位置，計(jì)算出裁剪框在位圖中相對(duì)于AB邊的位置，便可確定JPG圖中需要裁剪的區(qū)域，實(shí)現(xiàn)坐標(biāo)映射。
圖7 位圖的AB邊確定
3） 在①中，對(duì)虛線裁剪框?qū)?yīng)的區(qū)域進(jìn)行解碼，得到用戶想要的裁剪圖片的位圖③ ，裁剪功能完成。
//解碼 try { Resource asset = assetManager.openRawFile(); ImageSource source = ImageSource.create(asset, options); //返回解碼后的位圖 return Optional.ofNullable(source.createPixelmap(decodingOptions)).get(); } catch (IOException e) { e.printStackTrace(); } return Optional.empty();2. 裁剪框移動(dòng)
裁剪框移動(dòng)的原理是：為裁剪框綁定一個(gè)單指點(diǎn)擊事件，如果監(jiān)聽(tīng)到了單指點(diǎn)擊，就獲取當(dāng)前裁剪框的大小和位置，單擊點(diǎn)移動(dòng)后，刷新裁剪框的繪制方法，以新的單擊點(diǎn)為中心重新繪制一個(gè)裁剪框，記錄新的裁剪框的大小和位置信息，從而實(shí)現(xiàn)裁剪框的移動(dòng)，具體代碼如下，效果如圖8所示。
//滑動(dòng)監(jiān)聽(tīng) public void setSlideListener() { ? ? ? //初始化滑動(dòng)監(jiān)聽(tīng) ? ? ?mCropBound.setTouchEventListener(new Component.TouchEventListener() { ?//創(chuàng)建一個(gè)RectFloat用來(lái)記錄滑動(dòng)之后的位置 ?RectFloat mScrolledClipBoundRect; ?@Override ?public boolean onTouchEvent(Component component, TouchEvent touchEvent) { ?//獲得當(dāng)前手指點(diǎn)擊位置，此位置為相對(duì)于整個(gè)屏幕的坐標(biāo)，屏幕左上角x=0，y=0； MmiPoint position = touchEvent.getPointerPosition(0); ?float x = position.getX(); ?float y = position.getY(); //獲得當(dāng)前裁剪框的寬和高 ? ? ? ?float width = getCropBoundWidth(); ? float height = getCropBoundHeight(); ?//獲得當(dāng)前圖片的位置，圖片所在的上下左右邊的位置 ? ? ? ? int left = mBitmapUtils.getPositionLeft(); ?int top = mBitmapUtils.getPositionTop(); ?int right = mBitmapUtils.getPositionRight(); ?int bottom = mBitmapUtils.getPositionBottom(); ?//獲得裁剪框位置，裁剪框所在的上下左右邊的位置 ? ? ? ? float cropBoundLeft = mCropRect.left; ?float cropBoundTop = mCropRect.top; ?float cropBoundRight = mCropRect.right; ?float cropBoundBottom = mCropRect.bottom; //判斷裁剪框的位置，裁剪框不能超過(guò)圖片的邊界 ?if ((right > (x + width / 2)) && ?((x - width / 2) > left) && ?(bottom > (y + height / 2)) && ?((y - height / 2) > top) ?) { ? ? ?//判斷裁剪框的位置，點(diǎn)擊事件必須在裁剪框內(nèi)才可以移動(dòng)裁剪框 ?if((cropBoundRight - width/10 > x) && ?(x > cropBoundLeft + width/10) && ?(cropBoundBottom - height/10> y) && ?(y > cropBoundTop + height/10)){ ? ? ? //記錄新的裁剪框的位置信息 ?mScrolledClipBoundRect = new RectFloat(x - width / 2.0f, y - height / 2.0f, x + width / 2.0f, y + height / 2.0f); ? ? ? ?//更新裁剪框 ?updateClipBound(mCropBound, mScrolledClipBoundRect); ? ? ? ? //更新記錄裁剪框位置信息的矩形 ?mCropRect = mScrolledClipBoundRect; return false; ?} ?} ?return false; ?} ?}); }圖8 裁剪框移動(dòng)
3. 圖片旋轉(zhuǎn)
JPG格式的圖片不可以執(zhí)行旋轉(zhuǎn)的操作，此處需要將JPG圖片轉(zhuǎn)換為位圖。左上角水平向右為位圖的X軸正方向，左上角垂直向下為位圖的Y軸正方位圖。位圖繪制完成后進(jìn)行旋轉(zhuǎn)操作，以圖片本身中心為中心點(diǎn)旋轉(zhuǎn)90度。具體代碼如下，效果如圖9所示。
private void rotate(Canvas canvas) { ?//以圖片中心為旋轉(zhuǎn)中心，旋轉(zhuǎn)90度 ?canvas.rotate(90 , mCropWindowHandler.getWindowWidth()/2 , mCropWindowHandler.getWindowWidth()/2); ? }圖9 圖片旋轉(zhuǎn)
4. 圖片翻轉(zhuǎn)
JPG格式的圖片不可以執(zhí)行翻轉(zhuǎn)的操作，此處需要將JPG圖片轉(zhuǎn)換為位圖，后續(xù)對(duì)位圖進(jìn)行操作。
1）水平翻轉(zhuǎn)
左上角水平向右為位圖的X軸正方向，左上角垂直向下為位圖的Y軸正方向。將位圖先向X軸負(fù)方向縮放一倍，其大小沒(méi)有變化，但是坐標(biāo)發(fā)生變化，位圖實(shí)現(xiàn)了以Y軸為對(duì)稱軸向左翻轉(zhuǎn)，最后向X軸正方向（即向右）移動(dòng)圖片寬度的距離，實(shí)現(xiàn)位圖的水平翻轉(zhuǎn)。具體代碼如下，效果如圖10所示。
//水平翻轉(zhuǎn)方法（Canvas倒序執(zhí)行） private void horizontalFilp(Canvas canvas){ ?canvas.save(); ?//向x軸正方向移動(dòng)canvas.translate(mCropWindowHandler.getWindowWidth() , 0); ?//向x軸負(fù)方向縮放一倍 canvas.scale(-1f , 1f); }圖10 圖片水平翻轉(zhuǎn)
2）垂直翻轉(zhuǎn)
坐標(biāo)系的設(shè)置與水平翻轉(zhuǎn)相同。將位圖先向Y軸負(fù)方向縮放一倍，其大小沒(méi)有變化，但是坐標(biāo)點(diǎn)發(fā)生變化，位圖實(shí)現(xiàn)了以X軸為對(duì)稱軸向上翻轉(zhuǎn)，然后向Y軸正方向（即向下）移動(dòng)圖片高度的距離，實(shí)現(xiàn)圖片的垂直翻轉(zhuǎn)。具體代碼如下，效果圖如圖11所示。
//豎直翻轉(zhuǎn)方法（Canvas倒序執(zhí)行） private void verticalFilp(Canvas canvas){ ?canvas.save(); ?//向y軸正方向移動(dòng) ?canvas.translate(0 , mCropWindowHandler.getWindowWidth()); ?//向y軸負(fù)方向縮放一倍 ?canvas.scale(1f , -1f); }圖11 圖片垂直翻轉(zhuǎn)
5. 方法重寫 ?
由于鴻蒙與安卓存在大量的UI構(gòu)建方式差異，因此ohos-Image-Cropper組件只參考了Android-Image-Cropper所實(shí)現(xiàn)的功能點(diǎn)，完全重寫了所有的實(shí)現(xiàn)方法。感興趣的小伙伴們可以自行比較源碼。
項(xiàng)目貢獻(xiàn)人
趙柏屹 鄭森文 朱偉 陳美汝 張馨心 王佳思
總結(jié)
以上是生活随笔為你收集整理的HarmonyOS第三方组件——鸿蒙图片裁剪组件ohos-Image-Cropper的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： VUE知识的补充
- 下一篇： Mybatis一发入魂