imageEdit

来自于:开发者立即使用

概述

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

open

添加图片

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)图片的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,   //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
    h: 220  //(可选项)数字类型;模块的高度;默认:220
}

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系统

可提供的1.0.0及更高版本

setBrush

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

setBrush({params})

params

color:

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

width:

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

type:

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

size:

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

示例代码

var imageEdit = api.require('imageEdit');
imageEdit.setBrush({
   color:'#f00',
   width:12,
   size:10,
   type:'line',
});

可用性

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 每个事件,都应该返回。
  • 内部字段:
{
      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

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
   realPath:           //字符串类型;图片保存到指定路径后的绝对路径,若保存失败则该参数为 undefined
   albumPath:          //字符串类型;图片保存到相册后的绝对路径,若保存失败则该参数为 undefined
}

示例代码

var imageEdit = api.require('imageEdit');
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 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
{
    x: 0,         //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,         //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320,       //(可选项)数字类型;模块的宽度;默认:open中设置的宽度
    h: 300        //(可选项)数字类型;模块的高度;默认:open中设置的高度
}

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本