Question

我是Raphael的新手，我想知道是否有一种方法可以绘制一个矩形，并在其中绘制文本并以某种方式附加它，这样当我移动并缩放矩形时，文本移动并且尺度也是？如果没有，我怎么能达到这个效果？

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

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

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

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

3 个答案: