如何将工具提示放在 canvas Easeljs 中的一个点上

Question

嘿，我构建了一个 canvas(EaselJS)，它的组件是：

1.2圈

2.One周围坐标系

3.several周围黑点

现在对于每个黑点，我想要一个工具提示，当用户点击它时它会打开。

我已经成功构建了工具提示，但是工具提示的位置不正确。

提示元素是一个 DOMElement Class 的 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++) {
 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 内容，因此它将覆盖 [=24= 中设置的任何内容].

相反，您可以使用 JQuery 计算额外的偏移量。只需访问尖端的 htmlElement（参考底层 DIV），并测量其 width/height，然后从坐标中减去您需要的值。

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

干杯。

如何将工具提示放在 canvas Easeljs 中的一个点上

how to place tooltip over a point in canvas Easeljs

javascript

css

jquery

canvas

easeljs