как разместить всплывающую подсказку над точкой в ​​полотне Easeljs

Question

Hey У меня есть построить холст (EaselJS), который его компоненты являются:

1,2 круги

2.One системы координат вокруг него

3. несколько черных точек вокруг него.

теперь для каждой черной точки, я хочу иметь всплывающую подсказку, которая открывается, когда пользователь нажимает на нее.

Мне удалось создать всплывающую подсказку, но размещение всплывающей подсказки не в нужном месте.

Элемент наконечника DOMElement Класс библиотеки easeljs, я показываю наконечник на каждом щелчке каждой точки.

У меня проблемы, когда я пытаюсь поместить всплывающую подсказку. Я пытаюсь получить координаты (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++) { 
 
\t 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(); 
 
     } 
 
    } 
 
    })

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

Если вы хотите получить фантазии, вы можете также убедиться, что он остается в пределах, а затем против смещения позиции ARROW элемента в.

Вот обновленная ручка: http://codepen.io/lannymcnie/pen/qaWAzk?editors=0010

Приветствия.