방법 Easeljs

Question

이봐, 나는 그것의 구성 요소가 캔버스 (EaselJS)를 구축해야 캔버스에 점 이상 툴팁을 배치합니다. 그 주위에 몇 개의 검은 점들이있다.

이제 각 검은 점에 대해 사용자가 클릭 할 때마다 열려있는 툴팁을 원합니다.

툴팁을 작성하는 데 성공했지만 툴팁 배치가 올바른 위치에 없습니다.

팁 요소는 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; 

당신이 공상 얻고 싶은 경우에, 당신은 또한 경계에 남아 있도록 수 있으며, 다음 화살표 요소의 위치를 ​​카운터 오프셋. http://codepen.io/lannymcnie/pen/qaWAzk?editors=0010

건배 : 여기

업데이트 된 펜입니다.