如何在画布中的Fabric JS图像中添加文本框弹出窗口(Jquery工具提示或类似文件)？

Question

我正在开发一个Fabric JS项目来绘制一个地板及其房间的位置.
在每个房间位置我添加了一个图标.我希望每次鼠标悬停在图标上方时弹出一个文本框(例如jquery工具提示).
文本框应显示房间信息(电话号码\人物\尺寸\等)我发现这个谷歌组帖子,但没有人真正描述旁边共享此链接的解决方案

Answer 1

第1步:设置您的观察者

第2步:加载对话框

第3步:找出页面上边界矩形的位置并移动对话框.

canvas.observe('mouse:over', function (e) {
    console.log("Everyday I'm hovering");
    showImageTools(e.target);
});
canvas.observe('mouse:out', function (e) {
    $('#imageDialog').remove();
});
function showImageTools (e) {
    var url = 'dialog/imageDialog.htm';
    $.get(url, function(data) {
    // Don't add it twice
    if (!$('#imageDialog').length) {
        $(body).append(data);
    }
    moveImageTools();
});

function moveImageTools () {
    var w = $('#imageDialog').width();
    var h = $('#imageDialog').height();
    var e = canvas.getActiveObject();
    var coords = getObjPosition(e);
    // -1 because we want to be inside the selection body
    var top = coords.bottom - h - 1;
    var left = coords.right - w - 1;
    $('#imageDialog').show();
    $('#imageDialog').css({top: top, left: left});
}
function getObjPosition (e) {
    // Get dimensions of object
    var rect = e.getBoundingRect();
    // We have the bounding box for rect... Now to get the canvas position
    var offset = canvas.calcOffset();
    // Do the math - offset is from $(body)
    var bottom = offset._offset.top + rect.top + rect.height;
    var right = offset._offset.left + rect.left + rect.width;
    var left = offset._offset.left + rect.left;
    var top = offset._offset.top + rect.top;
    return {left: left, top: top, right: right, bottom: bottom};
}

这应该足以让你开始.如果任何一个没有意义,请告诉我.