# crop_image_layout_ohos

**Repository Path**: isrc_ohos/crop_image_layout_ohos

## Basic Information

- **Project Name**: crop_image_layout_ohos
- **Description**: No description available
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2021-04-12
- **Last Updated**: 2023-10-25

## Categories & Tags

**Categories**: harmonyos-image

**Tags**: None

## README

# crop_image_layout_ohos

#### 项目介绍

- 项目名称：开源图片裁切项目
- 所属系列：鸿蒙的第三方组件适配移植
- 功能：支持图片旋转、裁剪框放大缩小及移动
- 项目移植状态：完成
- 调用差异：无
- 开发版本： DevEco Studio 3.0 Beta1, SDK 5.0
- 项目发起作者：王时予
- 联系方式：isrc_hm@iscas.ac.cn
- 原项目Doc地址：https://github.com/yulu/crop-image-layout
#### 项目介绍

- 编程语言：Java 

#### 安装教程

1. 下载裁切jar包cropimagelayout.har。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。

![输入图片说明](https://images.gitee.com/uploads/images/2021/0412/154503_f844f482_6526816.png "捕获.PNG")

3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。
```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

#### 使用说明

1. 布局文件定义，提供控件：EditPhotoView
```xml
<com.example.croplayout.EditPhotoView
    xmlns:crop="http://schemas.huawei.com/res/ohos-auto"
    ohos:id="$+id:editable_image"
    ohos:height="300vp"
    ohos:width="300vp"
    ohos:background_element="#fff"
    ohos:margin="20vp"
    crop:crop_corner_color="#45B4CA"
    crop:crop_dot_color="#333333"
    crop:crop_line_color="#d7af55"
    crop:crop_shadow_color="#77ffffff"/>
```
其中可自定义的参数有：

crop_line_width：裁剪框的边线宽度（vp）

crop_line_color：裁剪框的边线颜色

crop_corner_width：裁剪框四角的宽度（vp）

crop_corner_length：裁剪框四角的长度（vp）

crop_corner_color：裁剪框四角的颜色

crop_shadow_color：裁剪框外阴影的颜色


2. 通过控件id绑定控件
```java
final EditPhotoView imageView = (EditPhotoView) findComponentById(ResourceTable.Id_editable_image);
final Text boxText = (Text) findComponentById(ResourceTable.Id_box_text);
final EditableImage image = new EditableImage(this, ResourceTable.Media_photo2);
```

3. 设置裁剪框的初始四角位置
```java
List<ScalableBox> boxes = new ArrayList<>();
boxes.add(new ScalableBox(25, 180, 640, 880));
boxes.add(new ScalableBox(2, 18, 680, 880));
boxes.add(new ScalableBox(250, 80, 400, 880));
image.setBoxes(boxes);
imageView.initView(this, image);
```
裁剪框列表中只有一个是活跃的，其余为候选项

后期可以通过`EditableImage.getActiveBoxIdx(int id)`方法设置活跃的裁剪框

默认的EditableImage.setBoxes(List<ScalableBox>)方法会将设置的第 0 个 box 设为活跃（从0开始）


4. 获取裁剪框的四角位置
```java
ScalableBox activeBox = image.getActiveBox();
boxText.setText("box: [" + activeBox.getX1() + "," + activeBox.getY1() +
    "],[" + activeBox.getX2() + "," + activeBox.getY2() + "]");
imageView.setOnBoxChangedListener(new OnBoxChangedListener() {
    @Override
    public void onChanged(int x1, int y1, int x2, int y2) {
        boxText.setText("box: [" + x1 + "," + y1 + "],[" + x2 + "," + y2 + "]");
    }
});
```

5. 处理旋转和裁剪按钮的监听事件
```java
Button rotateButton = (Button) findComponentById(ResourceTable.Id_rotate_button);
rotateButton.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        imageView.rotateImageView();
    }
});

Button cropButton = (Button) findComponentById(ResourceTable.Id_crop_button);
cropButton.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        PixelMap croppedImage = image.cropOriginalImage();
        Intent newIntent = new Intent();
        newIntent.setParam("image", croppedImage);
        present(new SecondAbilitySlice(), newIntent);
    }
});
```
这里的方法是使用 present 方法在新的 AbilitySlice 中显示裁剪后的图片

在新的 AbilitySlice 中使用 `intent.getSequenceableParam("image")` 接收 PixelMap

也可直接将 cropOriginalImage() 方法返回的 PixelMap 值传给当前界面

#### 版本迭代


- v0.2.0-alpha


#### 版权和许可信息
- crop_image_layout_ohos经过[Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0)授权许可。