jquery.picsign中如何使用圖片標註元件

這篇文章主要介紹了jquery.picsign 自己封裝的第一個開源元件,需要的朋友可以參考下

經過幾天的嘗試和學習，封裝了自己的第一個js元件,有很多不足之處還請賜教。

因為一些業務需求，需要為圖片添加一些標註，從網上找了一些但都不能滿足需求，並且存在一些bug，坑太多

因此就有想法自己封裝一個，學習了其他類似元件的實作思路，以及js元件的開發思路，開發了jquery.picsign元件

jQuery圖片標註元件（jquery .picsign）

線上示範：http://artlessbruin.gitee.io/picsign/

gitee：https://gitee.com/ArtlessBruin/PicSign

1. 元件依賴

#jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

#bootstrap

# #

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

layer

<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

webui-popover

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

2. 引用元件檔

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>

3. 使用
#在頁面中加入一個p

• <p id="picsign"></p>

  初始化元件

• $("#picsign").picsign(option);
  //option为组件参数，详细说明见option参数说明

  option參數說明

var option={
 picurl: null,//图片地址
 signdata: [],//初始数据,详细说明参见基本数据格式
 editable: {//是否可编辑(默认可编辑 设置为false则禁用所有编辑)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可删除
 move: true//是否可移动
 },
 signclass: 'signdot',//标注点样式
 popwidth: 400,//标注内容显示窗口宽
 popheight: 247,//标注内容显示窗口高
 inputwidth: 400,//标注内容编辑窗口宽
 inputheight: 247,//标注内容编辑窗口高
 beforeadd: function (data) {//在添加保存前执行的方法，返回false阻断添加
 },
 onadd: function (data) {//添加完成执行的方法
 },
 beforeupdate: function (data) {//在修改保存前执行的方法，返回false阻断修改
 },
 onupdate: function (data) {//修改完成执行的方法
 },
 beforedel: function (data) {//在删除保存前执行的方法，返回false阻断删除
 },
 ondel: function (data) {//删除完成执行的方法
 }
};

基本資料格式

[{
 left:'50%',
 top:'50%',
 msg:'这是标注信息',
 signid:'这是标注唯一标识符，用户无需赋值，与组件逻辑相关，请不要使用此关键字'
}]

使用者新增的資料中必須包含left、top 、msg屬性

使用者可自行擴充其他屬性

#特殊說明：請不要新增和使用signid關鍵字

方法呼叫

$("#picsign").picsign('functionName',parameter);
//functionName为方法名称，parameter为方法参数，详细说明参见方法说明

方法說明

#取得標註資料

方法名稱：getData參數：無

$("#picsign").picsign('getData');

新增標註資料

方法名稱：addSign

參數：基本資料Json,是否觸發事件（預設為true）

$("#p_picsign").picsign("addSign",
 [{ left: '50%', top: '10%', msg: "123"},
 { left: '80%', top: '10%', msg: "456"}],
 true
)

切換標註顯示狀態

方法名稱：toggle參數：無

$("#p_picsign").picsign("toggle")

元件銷毀

方法名稱：destroy參數：無

$("#p_picsign").picsign("destroy")

###上面是我整理給大家的，希望今後對大家有幫助。 ######相關文章：#########在JS中指令模式概念與用法（詳細教學）############使用selenium抓取淘寶資料資訊# ###########使用百度地圖如何實作地圖網格#######

以上是jquery.picsign中如何使用圖片標註元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！