Question

所以我希望在Raphael中检索文本字符串的大小，我似乎无法做到这一点。虽然文档说明了

.attr('width');

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

这是FIDDLE

这就是我一直在尝试的......以及其他粗俗的方式（甚至使用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

Answer 1

您可以使用：

this.node.getBBox().width

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

您也可以直接使用Raphael的getBBox方法：

this.getBBox().width

您的方法不起作用，因为svg text element没有宽度属性。

Answer 2

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

Answer 3

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

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

试图在Raphael中检索渲染文本宽度

3 个答案: