我想在画布内的动态图像上显示工具提示。这是我想要显示工具提示的图像路径。（我想在绿色和灰色图像上显示工具提示）。 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>
上面提到的这个代码现在可以在每个图像鼠标悬停上显示单个消息，但是在mentioed co-orininates上显示，这里我想显示每个图像鼠标悬停时的唯一消息（图中的绿色/灰色）就像在给定的图片中，在我想要显示工具提示的图像上方。
此外，只需双击即可将图像绑定到选项卡的画布。
感谢您提前提供任何帮助。
答案 0 :(得分：0)
单击“编辑”按钮，查看代码。
或者在这里查看代码：
var canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.width = 500;
var ctx = canvas.getContext('2d');
var image1 = new Image();
image1.onload = function() {
// Image is Loaded, let's start the render() function!
render();
};
image1.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
// Global X and Y from the MouseMove - to check if hovering over Vader
var x = 0, y = 0;
// This is a Simple Timeout. Since you want to re-draw the image often.
function render(){
// Lets pain the Canvas Grey!
ctx.fillStyle='grey';
ctx.fillRect(0,0,canvas.width,canvas.height);
// Draw Vader
ctx.drawImage(image1, 200, 20, 200, 200);
// These are roughly the positions of VADER, now the text will only display when you move over VADER!
if(x > 275 && x < 540 && y > 35 && y < 210){
ctx.fillStyle= 'black';
ctx.fillRect(200,20,80,40);
ctx.fillStyle= 'white';
ctx.font="20px Georgia";
ctx.fillText("VADER",205,45);
}
// Repeat every 200ms
setTimeout(function(){
render();
},200);
}
window.addEventListener( 'mousemove', check_mouse_position);
// When the mouse is moved, it will call the function below:
function check_mouse_position(e){
x = e.x;
y = e.y;
}
这应该简单得多。使用鼠标的X和Y位置找出显示文本的位置......
答案 1 :(得分：0)
修改后的代码在下面，根据需要正在运行。我设法在kinecticjs和Opentip的帮助下完成。这是输出图片here。
$("#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, _x, _y) {
text.setX(_x + 20);
text.setY(_y + 1);
text.setText(message);
layer.draw();
}
var text = new Kinetic.Text({
fontFamily: 'Arial',
fontSize: 14,
text: '',
fill: '#000',
width: 200,
height: 60,
align: 'center'
});
var opentooltip = new Opentip(
"div#tab" + tabId, //target element
"dummy", // will be replaced
"", // title
{
showOn: null // I'll manually manage the showOn effect
});
Opentip.styles.win = {
borderColor: "black",
shadow: false,
background: "#EAEAEA"
};
Opentip.defaultStyle = "win";
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 () {
opentooltip.setContent("<span style='color:#25A0D3;'>Bay:</span> " + this.getId() + "<br> <span style='color:#25A0D3;'>Zone:</span><span>" + this.getName() + "</span>");
//writeMessage("Bay: " + this.getId() + " , Zone: " + this.getName(), this.getX(), this.getY());//other way of showing tooltip
opentooltip.show();
//$("#opentip-1").offset({ left: this.getX(), top: this.getY() });
});
planetOverlay.on('mouseout', function () {
opentooltip.hide();
// 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');
}
});
});
});