jQuery PicSign图片标注组件实例详解

什么是jQuery PicSign图片标注组件

jQuery PicSign图片标注组件是一款基于jQuery库开发的图片标注组件，可以在图片上进行多个热点位置标注，支持多种样式和动画效果，并且可自定义标注内容和样式。

组件使用方法

引入相关文件

1. 引入jQuery库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 引入PicSign组件文件

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

HTML结构

<div class="picsign-wrapper">
    <img src="image.jpg" alt="">
</div>

初始化组件

$('.picsign-wrapper').picsign();

组件参数配置

• pics: Array，标注点集合

$('.picsign-wrapper').picsign({
    pics: [
        {
            x: 80,
            y: 80,
            message: '这是标注1',
            direction: 'left'
        },
        {
            x: 150,
            y: 150,
            message: '这是标注2',
            direction: 'top'
        }
    ]
});

• width: Number，热点标记图标宽度

$('.picsign-wrapper').picsign({
    width: 25
});

• height: Number，热点标记图标高度

$('.picsign-wrapper').picsign({
    height: 25
});

• fontSize: Number，热点标记字体大小

$('.picsign-wrapper').picsign({
    fontSize: 14
});

• lineHeight: Number，热点标记字体行高

$('.picsign-wrapper').picsign({
    lineHeight: 1.8
});

• borderRadius: Number，热点标记图标圆角大小

$('.picsign-wrapper').picsign({
    borderRadius: 5
});

• lineColor: String，连接线颜色

$('.picsign-wrapper').picsign({
    lineColor: '#ff3333'
});

• lineWidth: Number，连接线宽度

$('.picsign-wrapper').picsign({
    lineWidth: 2
});

• bgColor: String，热点标记图标背景色

$('.picsign-wrapper').picsign({
    bgColor: '#ff9966'
});

组件API介绍

添加标注点

var picsign = $('.picsign-wrapper').picsign();
// 添加一个标注点
picsign.add({
    x: 200,
    y: 200,
    message: '这是新增的标注',
    direction: 'right'
});

删除标注点

var picsign = $('.picsign-wrapper').picsign();
// 删除第一个标注点
picsign.delete(0);

组件示例说明

示例一

在一张图片上添加3个标注点，每个标注点都有不同的提示信息和样式。

<div class="picsign-wrapper">
    <img src="./image.jpg" alt="">
</div>

$('.picsign-wrapper').picsign({
    pics: [
        {
            x: 100,
            y: 100,
            message: '这是标注1',
            direction: 'top',
            bgColor: '#ff9966',
            lineColor: '#ff3333',
            lineWidth: 2,
            borderRadius: 6
        },
        {
            x: 200,
            y: 200,
            message: '这是标注2',
            direction: 'bottom',
            bgColor: '#3399cc',
            lineColor: '#336699',
            lineWidth: 2,
            borderRadius: 8
        },
        {
            x: 300,
            y: 300,
            message: '这是标注3',
            direction: 'right',
            bgColor: '#66cccc',
            lineColor: '#009999',
            lineWidth: 2,
            borderRadius: 10
        }
    ]
});

示例二

在一张图片上动态添加标注点，点击图片添加标注点，鼠标移动到标注点上时显示提示框。

<div class="picsign-wrapper">
    <img src="./image.jpg" alt="">
</div>

var picsign = $('.picsign-wrapper').picsign();

// 添加标注点
$('.picsign-wrapper img').on('click', function(e){
    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;

    picsign.add({
        x: x,
        y: y,
        message: '这是刚添加的标注点',
        direction: 'right'
    })
});

// 显示提示框
$('.picsign-wrapper').on('mouseover', function(e){
    var index = $(e.target).data('index');
    if(index !== undefined){
        picsign.show(index);
    }
});

// 隐藏提示框
$('.picsign-wrapper').on('mouseleave', function(e){
    var index = $(e.target).data('index');
    if(index !== undefined){
        picsign.hide(index);
    }
});