如何向 canvas 中的 Fabric JS 图像添加文本框弹出窗口（Jquery 工具提示或类似内容）？

Question

我正在做一个 Fabric JS 项目来绘制一个楼层及其房间的位置。
在每个房间位置，我都添加了一个图标。我希望每次鼠标悬停在图标上方时弹出一个文本框（例如 jquery 工具提示）。
文本框应显示房间信息（phone 人数\人数\人数\等）我发现 this google group post, but no one really described the solution beside sharing this link

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

这应该足以让您入门。如果其中任何一个没有意义，请告诉我。

Answer 2

在 canvas

下方添加 span 元素

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

为 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'
      })

如何向 canvas 中的 Fabric JS 图像添加文本框弹出窗口（Jquery 工具提示或类似内容）？

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

javascript

jquery

jquery-tooltip

fabricjs