如何將工具提示放在畫布Easeljs中的某個點上

Question

嘿，我已經構建了一個canvas（ EaselJS ），它的組件是：

1.2圈

2.圍繞它的一個坐標系

3.周圍有幾個黑點。

現在，對於每個黑點，我希望有一個工具提示，只要用戶單擊它，它就會打開。

我已經成功構建了工具提示，但是工具提示的放置位置不正確。

tip元素是easyljs庫的DOMElement類，我在每個點的每次單擊上都顯示了tip。

我在嘗試放置工具提示時遇到問題。 我試圖獲取當前事件的坐標（x，y）並使用這些坐標來定位工具提示。 但是到目前為止，工具提示的位置還不穩定，並且顯示的提示不是在該點上方，而是在其旁邊或該點下方。

該代碼也可以在Codepen中找到： http ://codepen.io/Barak/pen/AXZxKN

我正在添加源代碼，您必須查看以下幾行：

var g = new createjs.Graphics().f("black").dc(0,0,5);
for (var i=0,l=data.length; i<l; i++) {
    var p = new createjs.Shape(g);
  var d = data[i];
  p.x = d[0] * GRAPH_WIDTH;
  p.y = GRAPH_HEIGHT - d[1] * GRAPH_HEIGHT;
  p.on("click", handleMouseClickEvent(d[0],d[1]));
  stage.addChild(p);
}
  stage.update(); 

   function handleMouseClickEvent(arg1,arg2) {
      return function reallyHandleMouseClickEvent(event) {
        console.log("you clicked the black point", event, arg1,arg2);
        tip.visible = true;
        tip.x = event.target.x ;
        tip.y = event.target.y ;
        stage.update();
       }
     }

 $(function(){ var stage = new createjs.Stage('canvas2d'); var circle1 = new createjs.Shape(); var circle2 = new createjs.Shape(); var rect = new createjs.Shape(); var data = [ [0.8, 0.8], [0.9, 0.4], [0.75, 0.25], [0.95, 0.1] ]; rect.graphics.beginFill("#32CD32"); rect.graphics.drawRect(50, 0, 500, 455); rect.graphics.endFill(); stage.addChild(rect); var lablelOne = new createjs.DOMElement("lablelOne") lablelOne.x = 10; lablelOne.y = 170; lablelOne.rotation = 90; stage.addChild(lablelOne); stage.update(); var lablelTwo = new createjs.DOMElement("lablelTwo") lablelTwo.x = 170; lablelTwo.y = 500; stage.addChild(lablelTwo); stage.update(); var tip = new createjs.DOMElement("tip"); tip.visible = false; stage.addChild(tip); stage.update(); circle2.graphics.beginFill("yellow").drawCircle(0, 0, 300); circle2.x = 500; circle2.y = 0; stage.addChild(circle2); circle1.graphics.beginFill("red").drawCircle(0, 0, 150); circle1.x = 500; circle1.y = 0; stage.addChild(circle1); //stage.addChild(rect); stage.update(); var coord_xaxis = new createjs.Shape(); stage.addChild(coord_xaxis); var coord_yaxis = new createjs.Shape(); stage.addChild(coord_yaxis); var coord_arrow_x = new createjs.Shape(); //stage.addChild(coord_arrow_x); var coord_arrow_y = new createjs.Shape(); //stage.addChild(coord_arrow_y); var coord_xaxis_lines = new createjs.Shape(); stage.addChild(coord_xaxis_lines); var coord_yaxis_lines = new createjs.Shape(); stage.addChild(coord_yaxis_lines); /**$('#canvas2d').width()/15**/ var axis_center_x = $('#canvas2d').width()/10; //here was 14 var axis_center_y = $('#canvas2d').height()/1.10; var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width(); var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height(); var axis_start_x = ($('#canvas2d').width()-xaxis_width)/1.20; var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6; var axis_strokewidth = 2; coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000'); coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y); coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000'); coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width); // draw coordsys arrow for x-axis var arrwidth = 5; var arrxtnd = 5; coord_arrow_x.graphics.beginFill('#000'); coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000'); coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2); coord_arrow_x.graphics.endFill(); // draw coordsys arrow for y-axis coord_arrow_y.graphics.beginFill('#000'); coord_arrow_y.graphics.beginStroke('#000'); coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y); coord_arrow_y.graphics.endFill(); var stepdist = xaxis_width/5.25; var steplinew = 6; // 10 horizontal lines var xlines = 10; var labels_x = []; for(var i=xlines;i>=0;i--) { // little black marker coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000'); coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist); // labels labels_x[i] = new createjs.Text('x', '14px Arial', '#333'); labels_x[i].x = axis_center_x-12; labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit stage.addChild(labels_x[i]); labels_x[i].text = (i/10); labels_x[i].textAlign = 'right'; } // 12 orthogonal lines var stepdist2 = xaxis_width/6.625; var steplinew2 = 6; var ylines = 10; var labels_y = []; for(var i=ylines;i>=1;i--) { // dont overdraw y-axis-line // little black marker coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000'); coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2); // labels labels_y[i] = new createjs.Text('x', '14px Arial', '#333'); labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit labels_y[i].y = axis_center_y+12; stage.addChild(labels_y[i]); labels_y[i].text = (i/10); labels_y[i].textAlign = 'center'; } var GRAPH_WIDTH = 500; var GRAPH_HEIGHT = 500; var g = new createjs.Graphics().f("black").dc(0,0,5); for (var i=0,l=data.length; i<l; i++) { var p = new createjs.Shape(g); var d = data[i]; px = d[0] * GRAPH_WIDTH; py = GRAPH_HEIGHT - d[1] * GRAPH_HEIGHT; p.on("click", handleMouseClickEvent(d[0],d[1])); stage.addChild(p); } stage.update(); function handleMouseClickEvent(arg1,arg2) { return function reallyHandleMouseClickEvent(event) { console.log("you clicked the black point", event, arg1,arg2); tip.visible = true; tip.x = event.target.x ; tip.y = event.target.y ; stage.update(); } } }) 

 #canvas2d{ background-color: white; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fleetRankGraph"> <span id="lablelOne" >Critical Index</span> <span id="lablelTwo" >Long-term Severity Index</span> <div id="tip" class="tooltip tooltip-main top in" role="presentation"><div class="tooltip-arrow"></div><div class="tooltip-inner">Hello World</div></div> <canvas id="canvas2d" width="500" height="500"></canvas> </div> 

Answer 1

通常，我建議使用CSS轉換元素，但是DOMElement使用CSS轉換來定位，縮放和旋轉DOMElement內容，因此它將覆蓋CSS中設置的所有內容。

相反，您可以使用JQuery計算附加偏移量。 只需訪問提示的htmlElement （對基礎DIV的引用），並測量其寬度/高度，然后從坐標中減去所需的內容即可。

var $tip = $(tip.htmlElement);
tip.x = event.target.x - $tip.width()/2;
tip.y = event.target.y - $tip.height() - 10;

如果您想花哨的話，還可以確保它停留在邊界內，然后抵消箭頭元素的位置。

這是更新的筆： http : //codepen.io/lannymcnie/pen/qaWAzk?editors=0010

干杯。