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

我正在开发一个Fabric JS项目来绘制地板及其房间的位置。
在每个房间位置我添加了一个图标。 每当鼠标hover在图标上方时，我想弹出一个文本框（例如jquery工具提示）。
文本框应该显示房间信息（电话号码\人\尺寸\等）我发现这个谷歌组post ，但没有人真正描述旁边共享此链接的解决方案

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

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