Raphael JS 사각형의 너비와 높이를 포함하는 텍스트 줄을 기준으로 너비와 높이를 설정하는 방법은 무엇입니까?

Question

나중에 SVG 서클 요소에 대한 툴팁으로 사용하고자하는 사각형 요소를 만듭니다. 지금 당장, 내가 포함하는 텍스트의 줄에 따라 변경해야하는 사각형 요소의 높이와 너비를 설정하는 논리를 생각하려고합니다. 단순히 라파엘 텍스트 요소를 만들고 직사각형으로 변환하므로 마치 '정말로'사각형에 텍스트가 들어있는 것처럼 보입니다. (제 3 자 툴팁 플러그인을 사용하지 않기로했기 때문에 jQuery를 사용하여 수정할 수도없고, gRaphael을 사용할 수도없고 툴팁으로 Raphael rectangle 요소 만 사용해야합니다.)

여기에 내가 뭐하는 거지입니다 - 일부는하지 않지만

var tipText = "Asoo ok m ml palksksk feesf k\nWeek:X-VAL\nRank:Y-VAL"; 
//splitting tipText for "\n" 
var tipText_seperate = tipText.split("\n"); 
var tipText_seperate_len = tipText_seperate.length; 

var line_len = []; 
for(var i=0;i<tipText_seperate_len;i++){ 
line_len[i] = tipText_seperate[i].length; 
} 

var a = Math.max.apply(Math, line_len);//getting the length of largest line 

//setting the width and height of the rectangle 
var box = {}; 
box.width = (a*5)+5; 
box.height = tipText_seperate_len*25; 

var c = {}; 
c.x = 10; 
c.y = 10; 
c.r = paper.rect(c.x,c.y,box.width,box.height,5).attr({fill:'#000000', opacity:0.7}); 
c.t = paper.text(c.x,c.y,tipText).attr({fill:'#FFFFFF'}); 
c.t.transform("t"+box.width/2+","+box.height/2); 

은 이제 사각형의 크기는, 텍스트의 일부 라인에 따라 조정됩니다. 이 경우 box.width 값을 변경해야합니다. 올바르지 않습니다. 이를 달성하기위한 효율적이고 논리적으로 올바른 방법이 있습니까?

Answer 1

트릭은 텍스트 요소를 작성하고 치수뿐만 아니라 x 및 y 값을 제공하는 텍스트 요소의 경계 상자를 얻을 수 getBBox을 사용하는 것입니다 ... 제발 도와주세요.

예를 들어 demo입니다. 일반적으로

// Create Raphael and circle set 
var Paper = new Raphael('canvas', 300, 300), 
    circles = Paper.set(); 

// Add circles to canvas, setting the tooltip text as a 
// data attribute 
circles.push(
    Paper.circle(100, 150, 25).data('tooltip', 'Here is some text'), 
    Paper.circle(200, 150, 25).data('tooltip', 'And here is \nsome longer text') 
); 

// Some base styles 
circles.attr({ 
    fill: 'red', 
    stroke: 0 
}); 

// Positioning of the tooltip box 
var margin = 10, 
    padding = 5; 

// Hover functions 
circles.hover(
    // On hover, create and show tooltip 
    function() { 
     // If the tooltip already exists on the element, simply 
     // show it. If it doesn't then we need to create it. 
     if (this.tooltip && this.tooltip.box) { 
      this.tooltip.show(); 
      this.tooltip.box.show(); 
     } else { 
      // Get the x and y positions. 
      // We get the 'true y' by deducting the radius 
      var x = this.attr('cx'), 
       y = this.attr('cy') - this.attr('r'); 

      // Create the tooltip text, attaching it to the 
      // circle itself 
      this.tooltip = Paper.text(x, y, this.data('tooltip')); 

      // Calculate the bounding box of our text element 
      var bounds = this.tooltip.getBBox(); 

      // Shift the text element in to correct position 
      this.tooltip.attr({ 
       // At this point `y` is equal to the top of the 
       // circle arc. When creating a text element, the 
       // `x` and `y` values are center points by default, 
       // so by deducting half the height we can fake 
       // a bottom align. Finally deducting our `margin` 
       // value creates the space between the circle and 
       // the tooltip. 
       y: y - (bounds.height/2) - margin, 
       fill: '#fff' 
      }); 

      // Create the tooltip box, again attaching it to the 
      // circle element. 
      // 
      // The `x`, `y` and dimensions are dynamically calculated 
      // using the text element's bounding box and margin/padding 
      // values. 
      // 
      // The `y` value again needs some special treatment, 
      // creating the fake bottom align by deducting half the 
      // text element's height. We then adjust the `y` further 
      // by deducting the sum of the `padding` and `margin`. 
      // The `margin` value is needed to create space between 
      // the circle and the tooltip, and the `padding` value 
      // shifts the box a little higher to create the illusion of 
      // padding. 
      // 
      // Try adjusting the `margin` and `padding` values. 
      this.tooltip.box = Paper.rect(bounds.x - padding, bounds.y - (bounds.height/2) - (padding + margin), bounds.width + (padding * 2), bounds.height + (padding * 2)); 

      // Style the box and put it behind text element 
      this.tooltip.box.attr({ 
       fill: '#000', 
       stroke: 0 
      }).toBack(); 
     } 
    }, 
    // On hover out, hide previously created tooltip 
    function() { 
     // Hide the tooltip elements 
     this.tooltip.box.hide(); 
     this.tooltip.hide(); 
    } 
);​