imageEdit

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

imageEdit模块封装了图片的编辑功能，支持给图片上添加线条、矩形框、圆形框、文本和箭头。用户点击某个形状（矩形框、圆形框、文本和箭头，不包括线条）时，模块会自动动态调整这个形状的边框颜色、边框粗细(如果是文字，就是文字颜色和文字字体大小)。

注意:iOS实现图片的编辑功能是CoreGraphics绘图API，所以在使用save接口的时候使用了截图的API代码，所以在使用open接口的时候传入的图片大小和所设置区域大小尽可能使得图片能够填充整个区域，以及背景色的设置也要慎重，请尽量选择白色，以保证保存后的图片能够正常使用

open

添加图片

open({params}, callback(ret))

rect：

类型：JSON 对象
描述：（可选项）图片的位置及尺寸
内部字段：

bgColor：

类型：字符串
描述：模块的背景颜色，支持rgb、rgba

path：

类型：字符串
描述：要编辑的图片的路径，要求本地路径（fs://、widget://）

contentMode：

类型：字符串
描述：（可选项）图片填充模式
默认值：’scaleToFill’
取值范围：
- scaleToFill（填充）
- scaleAspectFit（适应）

fixedOn：

类型：字符串
描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
默认：模块依附于当前 window

fixed：

类型：布尔
描述：（可选项）模块是否随所属 window 或 frame 滚动
默认值：true（不随之滚动）

callback(ret)

ret：

类型：JSON 对象
内部字段：

     status: true     //布尔类型；是否打开成功                   
}

示例代码

var imageEdit = api.require('imageEdit');
imageEdit.open({
    rect: {
        x: 0,
        y: 0,
        w: api.frameWidth,
        h: 340
    },
    bgColor:'#fff',
    path:'widget://res/king.png',
    contentMode: 'scaleToFill',
    fixedOn: api.frameName,
    fixed: false
}, function(ret) {
    if (ret.status) {
        alert('打开成功！');
    } else {
        alert('打开失败！');
});

可用性

iOS系统，Android系统

setBrush

设置画笔，用户点击某个形状（矩形框、圆形框、文本和箭头，不包括线条）时，模块会自动动态调整这个形状的边框颜色、边框粗细(如果是文字，就是文字颜色和文字字体大小)为当前画笔的样式。

setBrush({params})

params

color：

类型：字符串
描述：(可选项)画笔颜色，支持rgb、rgba、#
默认：#fff

width：

类型：数字
描述：(可选项)画笔粗细
默认：1.0

type：

类型：字符串
描述：(可选项)画笔类型
默认：line
- line：线条，用户在模块上的滑动手势轨迹用线条显示
- rectangle：矩形，滑动手势的起点和终点确定一个矩形框，随用户手势变大缩小，结束后可拖动改变其位置
- circular：圆形，滑动手势的起点和终点确定一个矩形框，该圆形框填充显示在此矩形框内，随用户手势变大缩小，结束后可拖动改变其位置
- text：文本，设置此类型后，模块会弹出键盘，并在紧贴键盘顶部的位置显示一个输入框，输入完成后，用户所输文本（自动换行）显示在模块点击的位置（上下左右居中），可拖动改变其位置
- arrow：箭头，滑动手势的起点和终点确定该箭头的起终点，结束后可拖动改变其位置

size：

类型：数字
描述：(可选项)文字的大小，仅当 type 为 text 的时候有效
默认：12

示例代码

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

添加监听事件

addEventListener({params}, callback(ret))

params

name：

类型：字符串
描述：监听的事件名字
默认：click
取值范围：
- click：用户对模块区域的单击事件
- drag：用户对画笔已添加的图形（当 type 非 line时所添加的元素）的拖动事件

callback(ret)

ret：

类型：JSON 对象
描述：返回值，eventType,仅当 name 为 drag 时有返回值;brush 每个事件,都应该返回。
内部字段：

{
         color: '#fff',          // 画笔颜色
         width: 1.0,             // 画笔粗细
         type: 'line',           // 画笔类型
         size: 12                // 尺寸
      }
      eventType: ‘starting’      //字符串类型；拖动事件类型，取值范围如下：
                                 //starting：开始拖动
                                 //dragging：拖动中
                                 //ending：拖动结束（当用户拖动到本模块顶部高度为44区域时抬起拖动手势，模块认定为拖动结束事件）
                                 //canceling：拖动取消（当用户未拖动到ending区域就抬起拖动手势的事件，模块认定为拖动取消事件）
}

示例代码

  var imageEdit = api.require('imageEdit');
  imageEdit.addEventListener({
       name:'click',
  },function(ret, err) {
        alert("用户单击了模块");
  });;

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

save

save({params}, callback(ret))

params

path：

类型：字符串类型
描述：（可选项）保存图片路径，要求本地路径（fs://），注意图片后缀名输入完整。若不传或传空，则模块默认将图片保存到临时数据文件夹下

copyToAlbum：

类型：布尔类型
描述：（可选项）是否将结果同时保存到系统相册
默认：false

ret：

类型：JSON 对象
内部字段：

示例代码


imageEdit.save({
    path: 'fs://imageEdit/result.png',
    copyToAlbum: false
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearCache

清除本模块产生的图片文件，本接口仅当 save -> path 参数不传或传空时有效，本接口只清除本模块产生的临时数据，若要清除本 app 缓存的所有数据则调用 api.clearCache

clearCache()

示例代码

var imageEdit = api.require('imageEdit');
imageEdit.clearCache();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

resetRect

重新设置模块位置、尺寸

resetRect({params})

params

rect：

类型：JSON 对象
描述：（可选项）模块的位置及尺寸
内部字段：

var imageEdit = api.require('imageEdit');
imageEdit.resetRect({
   rect:{
   x:0,
   y:0,
   w:320,
   h:300
   }

可用性

iOS系统，Android系统