Могу ли я прикрепить/привязать текст к элементам в Рафаэле?

Question

Я совершенно новый для Рафаэля, и мне было интересно, есть ли способ, которым я могу нарисовать прямоугольник, и нарисую текст внутри него и прикрепить его каким-то образом, чтобы при перемещении и масштабировании прямоугольника текст перемещался и масштабировался также? Если нет, как я могу добиться этого эффекта?

Answer 1

Один из способов будет использовать Sets так:

var paper = Raphael("holder", 200, 200); 
paper.setStart(); 
paper.rect(-50, -50, 100, 100); 
paper.text(0, 0, "hello"); 
var st = paper.setFinish(); 
st.transform("r10").translate(100, 100); 

(On JSFiddle)

Совет: Обратите внимание, что вы должны отслеживать оси вращения на свой собственный, если вы не используете 0,0, как центр. Я лично хотел сохранить его на 0,0, а затем перевести его туда, где я хочу.

Answer 2

Вы можете попробовать использовать это вместо этого. Размер прямоугольника изменяется по мере увеличения длины текста.

var recttext = paper.set(); 
el = paper.rect(0, 0, 300, 200); 
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14}); 
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14}); 
recttext.push(el); 
recttext.push(text); 
recttext.push(text1); 
alert(recttext.getBBox().width); 
alert(recttext.getBBox().height); 
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height}; 
el.attr(att); 
recttext.translate(700,400); 

Answer 3

Вы можете использовать метод данных «Рафаэля», чтобы связать два элемента вместе.

paper = Raphael(paper, 400, 400); 
var circle = paper.circle(50, 50, 20) 
.attr({ 
"fill": "#0ff" 
}) 
.data("initialR", 20); 

var labelize = function (shape, label) { 
if (!label) { 
    var label = "StackOverflow" 
}; 
var label = paper.text(shape.attr("cx"), shape.attr("cy"), label) 
    .attr({ 
    "opacity": 0 
}); 
shape.data("label", label); 

var hoverIn = function() { 
    this.animate({ 
     "r": 100 
    }, 500, "<>"); 
    this.data("label").animate({ 
     "opacity": 1 
    }, 500); 
}; 
var hoverOut = function() { 
    this.animate({ 
     "r": this.data("initialR") 
    }, 500, "<>"); 
    this.data("label").animate({ 
     "opacity": 0 
    }, 500); 
}; 
shape.hover(hoverIn, hoverOut, shape, shape); 
return shape; 
}; 

circle = labelize(circle, "CaptSaltyJack"); 

JSFiddle