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

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- >获取与Raphael元素关联的SVG元素
getBBox()- >边界框

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

this.getBBox().width

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