JS实现图层上标注信息_浮叶蓝空的博客

#### 前言
最近遇到个在图片中标注信息的需求，网上大概看了一下没有合适的插件，干脆手写一个。贡献出来给有需要的朋友一个参考

#### 解决的问题
1. 能在页面图片上创建标注点
2. 鼠标指上标注点能展示详细信息

### 成果展示
[![鼠标指上标注点演示](https://www.milinger.com/upload/202109/db2725db3817ef06a2154fc1f5222ff9.gif "鼠标指上标注点演示")](https://www.milinger.com/a240.html "鼠标指上标注点演示")

### 使用文档
#### 1. 代码依赖
 1. JS：[jQuery](https://jquery.com "jQuery")
 2. 图标：[Font Awesome](http://www.fontawesome.com.cn/ "Font Awesome")

#### 2. 可用方法
```javascript
// 接口

创建对象：var picture = new fpm("#picture"); // 对象要求：position：absolute

设置样式：setMaskStyle(pointSize, pointColor, backgroundColor);

创建一个标注点：setOnePoint(x,y,color);

移除一个标注点：unSetOnePoint(pointId);

移除全部标注点：unSetAllPoint();

显示标注点详情：showDetail(data); // data:{x,y,title,subtitle,list:[{title,value}]}

隐藏标注点详情：hideDetail();

// 事件

点击画布事件：onClickCanvas(event); // event:{x,y}

设置标注点事件：onSetPoint(point); // point:{x,y,id}

鼠标经过标注点事件：onEnterPoint(point); // point:{id}

鼠标离开标注点事件：onLeavePoint(point); // point:{id}

```
#### 使用示例
```html
<script src='https://www.milinger.com/upload/202109/fuyelk-picture-mask.js'>
<style>
    .picture {
        margin-top: 100px;
        margin-left: 200px;
        width: 700px;
        height: 430px;
        position: absolute;
        background-image: url('https://www.milinger.com/upload/202109/80c24b4f8cdfc58ff23c534fe35d11f9.jpg');
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
</style>
<div class="picture" style="" id="picture"></div>

### 完整JS代码在这里(～￣▽￣)～ 
```javascript
/**
 * 图片标点管理
 * @author fuyelk <fuyelk@fuyelk.com>
 * @date 2021/08/31 17:41
 * @param canvasElement 画布ID
 */
function fpm(canvasElement) {
    // 当前对象别名
    var that = this;

// 标注点ID
    var pointId = 0;

// X坐标
    var pointX = 0;

// Y坐标
    var pointY = 0;

// 画布
    var canvas = $(canvasElement);

// 标注点模板
    var pointTemplate = "<div class='mask-point' id='$$id$$' data-pointid='$$pointid$$' style='left: $$left$$px; top: $$top$$px; $$extend$$'></div>";

// 标注点样式
    var maskPointCss = ".mask-point{width:$$size$$px;height:$$size$$px;border-radius:50%;position:absolute;background-color:$$color$$;cursor:pointer;}";

// 标注详情样式
    var maskDetailCss = ".mask-detail{display:inline-block;width:300px;background-color:$$backgroundColor$$;color:#eeeeee;position:absolute;z-index:100;display:none}.mask-detail .header{position:relative;padding:15px;text-align:left;border-bottom:1px solid #B3B3B3;}.mask-detail .header .title{font-size:15px;margin-bottom:7px;}.mask-detail .header .subtitle{font-size:12px;color:#ccc;}.mask-detail .header .icon{position:absolute;right:10px;top:15px;font-size:30px;}.mask-detail .mask-content{padding:15px;}.mask-detail .mask-content ul{list-style:none;padding:0;}.mask-detail .mask-content ul li{height:40px;line-height:40px;font-size:12px;}.mask-detail .mask-content ul li .title{float:left;}.mask-detail .mask-content ul li .value{float:right;}";

// 创建样式表容器
    canvas.append("<div id='fpm-mask-" + canvasElement.substr(1) + "'></div>");
    var maskstyle = $("#fpm-mask-" + canvasElement.substr(1));

// 创建详情内容
    canvas.append("<div class='mask-detail hide' id='mask-detail-" + canvasElement.substr(1) + "'><div class='header'><div class='title'></div><div class='subtitle'></div><div class='icon'><i class='fa fa-pie-chart'></i></div></div><div class='mask-content'><ul><li><span class='title'></span><span class='value'></span></li></ul></div></div>");
    var maskDetail = $("#mask-detail-" + canvasElement.substr(1));

// 声明点击画布事件
    var clickCanvasEvent = function () {
    };

// 声明设置标注点事件
    var setPointEvent = function () {
    };

// 声明经过标注点事件
    var enterPointEvent = function () {
    };

// 声明离开标注点事件
    var leavePointEvent = function () {
    };

// 获取鼠标位置
    canvas.mousemove(function (event) {
        pointX = event.offsetX;
        pointY = event.offsetY;
    });

// 点击画布事件
    canvas.click(function () {
        // 触发点击画布事件
        clickCanvasEvent({
            x: pointX,
            y: pointY
        });
    });

// -----------------  公共接口 Begin  -----------------

/**
     * 设置样式
     * @param {integer} pointSize 标注点大小
     * @param {string} pointColor 标注点颜色
     * @param {string} backgroundColor 详情背景颜色
     */
    this.setMaskStyle = function (pointSize, pointColor, backgroundColor) {
        if (undefined === pointSize) {
            pointSize = 20;
        }
        if (undefined === pointColor) {
            pointColor = "rgba(100, 255 ,112, 64)";
        }
        if (undefined === backgroundColor) {
            backgroundColor = "rgba(15,35,100,0.71)";
        }

var pointCss = maskPointCss.replace("$$size$$", pointSize).replace("$$size$$", pointSize).replace("$$color$$", pointColor);
        var detailCss = maskDetailCss.replace("$$backgroundColor$$", backgroundColor);

// 重置样式表
        maskstyle.html("<style>" + pointCss + detailCss + "</style>");
    };

/**
     * 手动创建一个标注点
     * @param {number} x 横坐标
     * @param {number} y 纵坐标
     * @param {string} color 颜色
     * @returns {number} 标注点ID
     */
    this.setOnePoint = function (x, y, color) {
        ++pointId;

var maskX = x, maskY = y;

// 标注点向左上偏移，以鼠标为中心
        if (maskX >= 10) {
            maskX -= 10;
        }
        if (maskY >= 10) {
            maskY -= 10;
        }

var extend = (undefined === color) ? "" : "background-color:" + color;

var oneMask = pointTemplate.replace("$$id$$", "mask-point-" + canvasElement.substr(1) + "-" + pointId)
            .replace("$$pointid$$", pointId)
            .replace("$$left$$", maskX)
            .replace("$$top$$", maskY)
            .replace("$$extend$$", extend);

// 添加一个标注点
        canvas.append(oneMask);

// 触发鼠标移入除事件
        $("#mask-point-" + canvasElement.substr(1) + "-" + pointId).mouseenter(function () {
            enterPointEvent({
                id: $(this).data('pointid')
            });
        }).mouseleave(function () { // 触发鼠标移出事件
            leavePointEvent({
                id: $(this).data('pointid')
            });
        });

// 触发创建标注点事件
        setPointEvent({
            x: x,
            y: y,
            id: pointId
        });

return pointId;
    };

/**
     * 移除一个标注点
     * @param {integer} pointId 标注点ID
     */
    this.unSetOnePoint = function (pointId) {
        $("#mask-point-" + canvasElement.substr(1) + "-" + pointId).remove();
    };

/**
     * 移除全部标注点
     */
    this.unSetAllPoint = function () {
        canvas.find(".mask-point").remove();
        pointId = 0;
    };

/**
     * 显示标注点详情
     * @param data {{x,y,title,subtitle,list:[{title,value}]}} 显示数据
     */
    this.showDetail = function (data) {
        maskDetail.find(".header .title").text(data.title);
        maskDetail.find(".header .subtitle").text(data.subtitle);

var content = [];
        data.list.forEach(function (item) {
            content.push("<li><span class='title'>" + item.title + "</span><span class='value'>" + item.value + "</span></li>");
        });

maskDetail.find(".mask-content ul").html(content);

// 自动调整悬浮窗位置
        maskDetail.css({
            "top": "auto",
            "bottom": "auto",
            "left": "auto",
            "right": "auto"
        });

var y = data.y;
        var x = data.x + 30; // 向右与标注点保持距离

// 上边超出，则贴顶
        if (y < 0) {
            maskDetail.css("top", 0);
        } else if (y + 275 > canvas.height()) {
            // 下边超出，则贴底
            maskDetail.css("bottom", 0);
        } else {
            maskDetail.css("top", y);
        }

// 左边超出，则贴左边
        if (x < 0) {
            maskDetail.css("left", 0);
        } else if (x + maskDetail.width() > canvas.width()) {
            // 右边超出

// 标注点到右侧距离不够宽，则放标注点左侧
            if ((canvas.width() - x) < maskDetail.width()) {
                var left = data.x - maskDetail.width() - 30;

// 左侧也不够宽
                if (left < 0) {
                    // 比较左右哪边更宽
                    if (left > x) {
                        // 左侧更宽，放左侧
                        maskDetail.css("left", 0);
                    } else {
                        // 右侧更宽，放右侧
                        maskDetail.css("right", 0);
                    }
                } else {
                    // 左侧够宽
                    maskDetail.css("left", left);
                }
            } else {
                // 右侧距离够宽，则贴右边
                maskDetail.css("right", 0);
            }
        } else {
            maskDetail.css("left", x);
        }

maskDetail.show();
        maskDetail.removeClass("hide");
    };

// 隐藏标注点详情
    this.hideDetail = function () {
        maskDetail.hide(100);
    };

// -----------------  公共接口 END  -----------------

// -----------------  公共事件 BEGIN  -----------------

/**
     * 点击画布事件
     * @param {{x,y}} event
     */
    this.onClickCanvas = function (event) {
        clickCanvasEvent = event;
    };

/**
     * 设置标注点事件
     * @param {{x,y,id}} point
     */
    this.onSetPoint = function (point) {
        setPointEvent = point;
    };

/**
     * 经过标注点事件
     * @param {{id}} point
     */
    this.onEnterPoint = function (point) {
        enterPointEvent = point;
    };

/**
     * 离开标注点事件
     * @param {{id}} point
     */
    this.onLeavePoint = function (point) {
        leavePointEvent = point;
    };

// -----------------  公共事件 END  -----------------

// 设置默认样式
    this.setMaskStyle();
}
```

## OK 看下效果

Qt选择文件

WSL2设置静态IP

1人点赞