【发布时间】：2013-11-27 17:14:27
【问题描述】：
我想在画布内的动态图像上显示工具提示。这是我要在其上显示工具提示的图像的路径。（我想在绿色和灰色图像上显示工具提示）。 enter link description here
这是我在 kinetic.js 的帮助下使用的代码。
$("#tabs li").each(function () {
$(this).live("click", function () {
var tabname = $(this).find("a").attr('name');
tabname = $.trim(tabname.replace("#tab", ""));
var tabId = $(this).find("a").attr('href');
tabId = $.trim(tabId.replace("#", ""));
$.ajax({
url: "/Home/GetTabsDetail",
dataType: 'json',
type: 'GET',
data: { tabId: tabId },
cache: false,
success: function (data) {
var bayStatus = [];
var i = 0;
var image_array = [];
var BayExist = false;
var BayCondition;
var imgSrc;
var CanvasBacgroundImage;
var _X;
var _bayNumber;
var _Y;
var _ZoneName;
$(data).each(function (i, val) {
i = i + 1;
if (!BayExist) {
bayStatus = val.BayStatus;
CanvasBacgroundImage = val.TabImageLocation;
BayExist = true;
}
$.each(val, function (k, v) {
if (k == "BayNumber") {
BayCondition = bayStatus[v];
_bayNumber = v;
if (BayCondition == "O")
imgSrc = "../../images/Parking/OccupiedCar.gif"
else if (BayCondition == "N")
imgSrc = "../../images/Parking/OpenCar.gif";
}
if (k == "BayX")
_X = v;
if (k == "BayY")
_Y = v;
if (k == "ZoneName")
_ZoneName = v;
});
image_array.push({ img: imgSrc, xAxis: _X, yAxis: _Y, toolTip: _bayNumber, ZoneName: _ZoneName });
});
var imageUrl = CanvasBacgroundImage;
$('#tab' + tabId).css('background-image', 'url("../../images/Parking/' + imageUrl + '")');
var _timer = setInterval(function () {
var stage = new Kinetic.Stage({
container: 'tab' + tabId,
width: 700,
height: 308
});
var layer = new Kinetic.Layer();
var planetOverlay;
function writeMessage(message) {
text.setText(message);
layer.draw();
}
var text = new Kinetic.Text({
x: 140,
y: 0,
fontFamily: 'Arial',
fontSize: 20,
text: '',
fill: '#000',
width: 740,
height: 60,
align: 'left',
padding: 40,
});
for (i = 0; i < image_array.length; i++) {
img = new Image();
debugger;
img.src = image_array[i].img;
planetOverlay = new Kinetic.Image({
x: image_array[i].xAxis,
y: image_array[i].yAxis,
image: img,
height: 18,
width: 18,
id: image_array[i].toolTip,
name: image_array[i].ZoneName
});
planetOverlay.on('mouseover', function () {
writeMessage("Bay: " + this.getId() + " , Zone: " + this.getName());
});
planetOverlay.on('mouseout', function () {
writeMessage('');
});
planetOverlay.createImageHitRegion(function () {
layer.draw();
});
layer.add(planetOverlay);
layer.add(text);
stage.add(layer);
}
clearInterval(_timer);
//$("#tab3 .kineticjs-content").find("canvas").css('background-image', 'url("' + imageUrl + '")');
}, 1000)
},
error: function (result) {
alert('error');
}
});
});
});
这是 html 部分。
<div style="background-position: center center; margin: 0px auto; padding-top: 50px; background-repeat: no-repeat; width: 700px; height: 308px; display: block; background-image: url("../../images/Parking/Garage-Floor-Plan.png");" id="tab3"><div style="position: relative; display: inline-block; width: 700px; height: 308px;" class="kineticjs-content" role="presentation"><canvas style="padding: 0px; margin: 0px; border: 0px none; background: none repeat scroll 0% 0% transparent; position: absolute; top: 0px; left: 0px; width: 700px; height: 308px;" width="700" height="308"></canvas></div></div>
上面提到的代码现在可以在每个图像鼠标悬停但在提到的坐标上显示单个消息，这里我想在每个图像的鼠标悬停时显示唯一消息（图中的绿色/灰色）如给定的图片和我要显示工具提示的图像上方。
此外，需要双击才能将图像绑定到选项卡的画布。
提前感谢您的帮助。
【问题讨论】：
-
我在遵循您的代码逻辑时遇到了问题。您的 setInterval 重复（每 200 毫秒）加载同一组图像并从这些图像创建 kinetic.images。为什么要重复……在 200 毫秒内问太多了。
-
根据需要更改代码以使其工作。根据您的说法，您的意思是 Kinetic 也在生成图像？我需要在给定图片中的图像上实现工具提示。欢迎提出任何建议。
-
代码已修改。
标签： kineticjs