5

所以我想在 Raphael 中检索文本字符串的大小，但我似乎做不到。虽然文档说

.attr('width');

是一个选项...我也无法设置宽度。

这是一个小提琴

这就是我一直在尝试的……加上其他粗略的方式（甚至使用 Jquery）

var page = Raphael("drawing_board");

    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: .5});
        console.log( this.attr('width') ); //THIS IS WHERE I AM TRYING TO GET THE WIDTH
    },
    move = function (dx, dy) {
        // move will be called with dx and dy

            nowX = Math.min(600, this.ox + dx);
            nowY = Math.min(400, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);
            this.attr({x: nowX, y: nowY });

    },
    up = function () {
        // restoring state
        this.attr({opacity: 1});

    };   

    page.text(200, 50, "TEXT 1").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);
    page.text(200, 200, "TEXT 2").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);

也许我需要使用其他东西

this.attr('width' : 30); //To Set
this.attr('width'); //To Get
4

3 回答 3

11

您可以使用：

this.node.getBBox().width

this.node-> 获取与 Raphael 元素关联的 SVG 元素
getBBox()-> 边界框

也可以getBBox直接使用拉斐尔的方法：

this.getBBox().width

您的方法不起作用，因为svg 文本元素没有 width 属性。

于 2013-04-11T19:54:00.490 回答
3

this.getBBox()是获取计算出的 bbox 的 RaphaelJS 方法，从而返回具有x y x1 x2 width和height属性的对象。它和 Raphaeljs 一样是跨浏览器。

于 2013-04-11T20:24:25.610 回答
0

SVG 文本元素没有该width属性。查看 w3c SVG 规范：http ://www.w3.org/TR/SVG/text.html#TextElement 属性列表中没有width，因此无法设置。

但是我们可以width使用jQuery. 可以首先检索 DOM 元素引用并将其传递给jQuery构造函数，然后使用该width()函数。这是更新的小提琴：http: //jsfiddle.net/Rmegm/8/

于 2013-04-11T20:03:38.743 回答