imageMarker


图片标注插件。提供在图片上添加标注的功能(注:环信、图片标注、cityselector不可同时使用,否则会引起编译失败)

var imageMarker = rd.require('imageMarker');

方法:

回调方法:

图片标注回调状态(Number):

图片标注类型(Number):

  • AnswerMaker: 答题标注,数值为0
  • ExpandMaker: 扩展标注,数值为1
  • KnowledgePointMaker: 知识点标注,数值为2

addMarkerSuccess


添加标注成功

返回内容:

{"imageId": 图片id, "markerId": 标注id, "type":标注类型, "position": {"x": x相对位置, "y": y相对位置}}

addMarkerFailed


添加标注失败

返回内容:

markerPositionChanged


标注位置改变

返回内容:

{"imageId": 图片id, "markerId": 标注id, "type":标注类型, "position": {"x": x相对位置, "y": y相对位置}}

markerDeleted


标注被删除

返回内容:

{"imageId": 图片id, "markerId": 标注id}

markerSelected


标注被选择

返回内容:

{"imageId": 图片id, "markerId": 标注id, "type":标注类型, "position": {"x": x相对位置, "y": y相对位置}}

createImageSuccess


生成图片成功

返回内容:

生成图片的路径

createImageFailed


生成图片失败

返回内容:

markerViewClosed


图片标注界面关闭

返回内容:

markerDoubleClickDelete


标注被双击删除,回调

返回内容:

{"imageId": 图片id, "markerId": 标注id}

createAllImagesSuccess


生成所有带标注图片成功的回调

返回内容:

[{"imageId": 图片id, "path": 图片路径},{"imageId": 图片id, "path": 图片路径},{"imageId": 图片id, "path": 图片路径}...]

init


初始化图片标注

imageMarker.init(callback);
说明:

初始化图片标注

参数:
  • callback: (callBack) 必选 回调方法
返回值:

示例代码:
imageMarker.init(callBack);

addMarkerType


新增图片标注类型

imageMarker.addMarkerType(id,name,imageUrl,selectImageUrl);
说明:

新增一个图片标注类型,默认有三种标注类型:答题,扩展和知识点。

参数:
  • id: (Number) 必选 类型ID
  • name: (String) 必选 类型名称
  • imageUrl: (String) 必选 图片的协议路径
  • selectImageUrl: (String) 必选 选择后图片的协议路径
返回值:

示例代码:
imageMarker.addMarkerType(4,‘标注’,‘cpt://marker.png’,’cpt://markerSelect.png‘);

setArrowImage


设置翻页按钮图片

imageMarker.setArrowImage(left, right);
说明:

设置翻页按钮图片

参数:
  • left: (String) 必选 左翻页按钮图片的协议路径
  • right: (String) 必选 右翻页按钮图片的协议路径
返回值:

示例代码:
imageMarker.setArrowImage(‘cpt://leftArrow.png’, 'cpt://rightArrow.png');

setImageUrl


imageMarker.setImageUrl(array);
说明:

设置要添加标注的图片

参数:
  • array: (JSON对象)必选 图片路径的数组,[{image:path}, {image:path}...]
返回值:

示例代码:
imageMarker.setImageUrl([{image:"cpt://img/pic1.png"},{image:"cpt://img/pic2.png"},{image:"cpt://img/pic3.jpg"},{image:"cpt://img/pic4.jpg"}]);

setFrame


imageMarker.setFrame(frame);
说明:

设置图片标注界面的位置和大小

参数:
  • frame: (JSON对象)必选 位置和大小{x: x坐标, y: y坐标, width: 宽度, height: 高度}

    返回值:

    示例代码:
          imageMarker.setFrame({x:0, y:200, width:320, height:300});
    

show


imageMarker.show();
说明:

显示图片标注界面

参数:

返回值:

示例代码:
imageMarker.show();

hide


隐藏图片标注界面

imageMarker.hide();
说明:

隐藏图片标注界面

参数:

返回值:

示例代码:
imageMarker.hide();

remove


删除图片标注界面

imageMarker.remove();
说明:

删除图片标注界面

参数:

返回值:

示例代码:
imageMarker.remove();

addMarker


imageMarker.addMarker(type);
说明:

添加一个标注

参数:
返回值:

示例代码:
imageMarker.addMarker(imageMarker.AnswerMaker);

removeMarker


imageMarker.removeMarker(id);
说明:

删除指定的标注

参数:
  • id: (String) 必选 要删除的标注的唯一标识,此标识在添加标注时的回调里得到
返回值:

示例代码:
imageMarker.removeMarker(id);

removeAllMarker


imageMarker.removeAllMarker();
说明:

删除所有添加的标注

参数:

返回值:

示例代码:
imageMarker.removeAllMarker();

generateImage


imageMarker.generateImage();
说明:

生成带标注的图片

参数:

返回值:

示例代码:
imageMarker.generateImage();

generateAllImages


imageMarker.generateAllImages();
说明:

生成所有带标注的图片

参数:

返回值:

示例代码:
imageMarker.generateAllImages();

callback


标注回调

function stateCallback (state,text) {

    alert("start"+text)
}
说明:

参数: