Maison > interface Web > js tutoriel > Comment utiliser le composant d'annotation d'image dans jquery.picsign

Comment utiliser le composant d'annotation d'image dans jquery.picsign

亚连
Libérer: 2018-06-08 13:51:47
original
1947 Les gens l'ont consulté

Cet article présente principalement le premier composant open source encapsulé par jquery.picsign. Les amis qui en ont besoin peuvent s'y référer

Après plusieurs jours d'essais et d'apprentissage, j'ai encapsulé mon premier composant js, il y en a. de nombreuses lacunes, merci de m'éclairer.

En raison de certains besoins professionnels, j'ai dû ajouter quelques annotations aux images. J'en ai trouvé sur Internet mais elles n'ont pas pu répondre aux besoins, et il y avait quelques bugs et trop d'embûches

J'ai donc eu l'idée d'en créer un moi-même, j'ai appris les idées d'implémentation d'autres composants similaires et les idées de développement de composants js, et j'ai développé le composant jquery.picsign

Composant d'annotation d'image jQuery (jquery .picsign)

Démo en ligne : http://artlessbruin.gitee.io/picsign/

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

1. Dépendances des composants

jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
Copier après la connexion

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>
Copier après la connexion

couche

<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>
Copier après la connexion

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>
Copier après la connexion

2 . Fichiers de composants de référence

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>
Copier après la connexion

3. > pour ajouter un p

Composant d'initialisation
<p id="picsign"></p>
Copier après la connexion

description du paramètre d'option
$("#picsign").picsign(option);
//option为组件参数,详细说明见option参数说明
Copier après la connexion

Format de données de base

var option={
 picurl: null,//图片地址
 signdata: [],//初始数据,详细说明参见基本数据格式
 editable: {//是否可编辑(默认可编辑 设置为false则禁用所有编辑)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可删除
 move: true//是否可移动
 },
 signclass: &#39;signdot&#39;,//标注点样式
 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) {//删除完成执行的方法
 }
};
Copier après la connexion

[{
 left:&#39;50%&#39;,
 top:&#39;50%&#39;,
 msg:&#39;这是标注信息&#39;,
 signid:&#39;这是标注唯一标识符,用户无需赋值,与组件逻辑相关,请不要使用此关键字&#39;
}]
Copier après la connexion
Les données ajoutées par l'utilisateur doivent contenir les attributs gauche, haut et msg
  • Les utilisateurs peuvent étendre d'autres attributs par eux-mêmes
  • Instructions spéciales : Veuillez ne pas ajouter et utiliser le mot-clé signid
  • Appel de méthode

Description de la méthode
$("#picsign").picsign(&#39;functionName&#39;,parameter);
//functionName为方法名称,parameter为方法参数,详细说明参见方法说明
Copier après la connexion

Obtenir les données d'annotation

Nom de la méthode : getData

Paramètres : Aucun

Ajouter des données d'annotation

$("#picsign").picsign(&#39;getData&#39;);
Copier après la connexion
Nom de la méthode : addSign

Paramètres : Données de base Json, s'il faut déclencher l'événement (la valeur par défaut est vraie)

Basculer l'état d'affichage de l'étiquette

$("#p_picsign").picsign("addSign",
 [{ left: &#39;50%&#39;, top: &#39;10%&#39;, msg: "123"},
 { left: &#39;80%&#39;, top: &#39;10%&#39;, msg: "456"}],
 true
)
Copier après la connexion
Nom de la méthode : bascule

Paramètres : Aucun

Destruction de composants
$("#p_picsign").picsign("toggle")
Copier après la connexion

Nom de la méthode : détruire

Paramètres : Aucun

Ce qui précède est ce que j'ai compilé. Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

$("#p_picsign").picsign("destroy")
Copier après la connexion
Articles associés :

Concept et utilisation du mode commande en JS (tutoriel détaillé)

Utiliser le sélénium pour capturer les informations sur les données Taobao

Comment implémenter une grille de carte à l'aide de Baidu Maps

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal