我可以将文本附加/绑定到Raphael中的元素吗？

Question

我是Raphael的全新品牌，我想知道是否有一种方法可以绘制矩形，并在其中绘制文本并以某种方式附加它，以便在移动和缩放矩形时，文本会移动并缩放以及？如果不是，我怎么能达到这个效果？如果你不使用0,0作为需要注意的是，你必须跟踪自己的旋转轴：

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，然后将其翻译为我想要的任何地方。

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

您可以使用Raphael的'data'方法将两个元素绑定在一起。

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