如何在画布中的Fabric JS图像中添加文本框弹出窗口(Jquery工具提示或类似文件)? [英] How to add a text box popup (Jquery tooltip or similar) to a Fabric JS image within a canvas?
问题描述
我正在开发一个Fabric JS项目来映射一个楼层及其房间的位置。
在每个房间位置我添加了一个图标。我希望每次鼠标悬停在图标上方时弹出一个文本框(例如jquery工具提示)。
文本框应显示房间信息(电话号码\ person \ size \等。)
我找到了这个谷歌群组帖子,但没有一个人真的描述了除了分享这个链接
I'm working on a Fabric JS project to map a floor with its rooms' locations.
At each room location I added an icon. I want to have a text box pop up (such as jquery tooltip) each time the mouse hover above the icon.
The text box should show room information (phone number \ person \ size \ etc.)
I found this google group post, but no one really described the solution beside sharing this link
推荐答案
第1步:设置你的观察者
Step 1: Set up your watchers
第2步:加载对话框
步骤3:找出页面上边界矩形的位置并移动对话框。
Step 3: Figure out where the bounding rect is on the page and move the dialog.
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};
}
这应该足以让你入门。如果其中任何一个没有意义,请告诉我。
That should be enough to get you started. Let me know if any of this doesn't make sense.
这篇关于如何在画布中的Fabric JS图像中添加文本框弹出窗口(Jquery工具提示或类似文件)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!