imageEdit

open setBrush addEventListener save clearCache resetRect

论坛示例

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

概述

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

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

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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24