Могу ли я прикрепить / привязать текст к элементам в Raphael? - PullRequest
Новая
       2

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

3 голосов
/ 08 февраля 2012

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

Ответы [ 3 ]

5 голосов
/ 08 февраля 2012

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

3 голосов
/ 24 сентября 2012

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

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);
1 голос
/ 10 апреля 2013

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

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

...