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

How to add a text box popup (Jquery tooltip or similar) to a Fabric JS image within a canvas?

本文关键字：添加 工具 布中 图像 JS Fabric 文本 工具提示 Jquery 窗口      更新时间：2023-09-26

我正在做一个Fabric JS项目，用房间的位置映射地板。
在每个房间的位置，我都添加了一个图标。我希望每次鼠标悬停在图标上方时都会弹出一个文本框（例如jquery工具提示）。
文本框应显示房间信息（电话号码''人''大小''等）我找到了这个谷歌小组帖子，但除了分享这个链接之外，没有人真正描述这个解决方案

步骤 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};
}

这应该足以让你开始。如果这些没有意义，请告诉我。

在

画布下方添加 span 元素

<span ref="toolTip" class="toolTip">ToolTip</span>

为范围元素添加样式注意：可见性默认隐藏

.toolTip{
  position: absolute;
  z-index: 1;
  background: rgb(119, 128, 0);
  height: 30px;
  width: 120px;
  padding: 8px;
  font-size: 13px;
  color: #fff;
  visibility: hidden;
}

添加鼠标悬停和鼠标悬停事件

 this.$data.canvas.on('mouse:over', function (e) {
        // console.log(e.e.offsetX)
        if (e.target && e.target.feature === 'Seat') {
          self.$refs.toolTip.innerHTML =
            'Seat: ' + e.target.label + '  Row: ' + e.target.rowLabel
          self.$refs.toolTip.style.visibility = 'visible'
          self.$refs.toolTip.style.top = e.e.offsetY + 'px'
          self.$refs.toolTip.style.left = e.e.offsetX + 'px'
        }
      })
      this.$data.canvas.on('mouse:out', function (e) {
        self.$refs.toolTip.style.visibility = 'hidden'
      })
相关文章：