Javascript 缩放后如何确定Raphael对象的大小&；旋转它？

如果我要创建一个初始大小为[w1，h1]的Raphael.js对象图像，然后使用

transform（）

方法对其进行缩放，那么之后我将如何检索其新大小[w2，h2]？因为调用

image.attr（“width”）

会返回w1，即初始宽度，而不是转换后的宽度

我知道你们可能会说，我应该简单地用缩放因子乘以w1和h1，但大多数时候，旋转变换也会被应用，这使得事情变得有点麻烦

---

简言之，Raphael.js中是否有一种方法可以检索对象的正确大小，而不管是否对其应用了任何变换？

有一种方法可以检索元素的边界框（带或不带变换）

随着变革：

var bbox = image.getBBox(),
    width = bbox.width,
    height = bbox.height;

var bbox = image.getBBoxWOTransform(),
    width = bbox.width,
    height = bbox.height;

未经改造：

var bbox = image.getBBox(),
    width = bbox.width,
    height = bbox.height;

var bbox = image.getBBoxWOTransform(),
    width = bbox.width,
    height = bbox.height;

---

您可以使用助手方法（如果小心的话）扩展Raphael.el，如果这对您有帮助，可以直接提供宽度和高度。您可以使用bounding box方法并返回感兴趣的部分，但为了更有效，我仅使用元素的矩阵属性和属性的位置/宽度/高度计算了请求的属性

(function (r) {
    function getX() {
        var posX = this.attr("x") || 0,
            posY = this.attr("y") || 0;
        return this.matrix.x(posX, posY);
    }

    function getY() {
        var posX = this.attr("x") || 0,
            posY = this.attr("y") || 0;
        return this.matrix.y(posX, posY);
    }

    function getWidth() {
        var posX = this.attr("x") || 0,
            posY = this.attr("y") || 0,
            maxX = posX + (this.attr("width") || 0),
            maxY = posY + (this.attr("height") || 0),
            m = this.matrix,
            x = [
                m.x(posX, posY),
                m.x(maxX, posY),
                m.x(maxX, maxY),
                m.x(posX, maxY)
            ];

        return Math.max.apply(Math, x) - Math.min.apply(Math, x);
    }

    function getHeight() {
        var posX = this.attr("x") || 0,
            posY = this.attr("y") || 0,
            maxX = posX + (this.attr("width") || 0),
            maxY = posY + (this.attr("height") || 0),
            m = this.matrix,
            y = [
                m.y(posX, posY),
                m.y(maxX, posY),
                m.y(maxX, maxY),
                m.y(posX, maxY)
            ];

        return Math.max.apply(Math, y) - Math.min.apply(Math, y);
    }

    r.getX = getX;
    r.getY = getY;
    r.getWidth = getWidth;
    r.getHeight = getHeight;
}(Raphael.el))

使用方法：

var x = image.getX();
var y = image.getY();
var width = image.getWidth();
var height = image.getHeight();

---

在加入拉斐尔之后再加入剧本。请注意，它仅适用于具有宽度、高度、x和y属性的元素，这些属性适用于图像。Raphael实际上从路径数据计算边界框，该数据转换路径中的所有点，并在转换后获得最小/最大x/y值。

Matt Esch的示例可能仅适用于某些（矩形）元素，但可以获得所有可能元素的度量（在元素受父组嵌套转换影响的情况下）我们必须使用另一种方法。要获取转换后SVG元素的各种度量（宽度、高度、bbox宽度、bbox高度、角坐标、边长等），我使用了get_metrics（）函数：

完整功能示例：

下图显示了get_metrics（）的一个可能用例：

函数

get_metrics（）

使用纯javascript，没有库。但是它可以与库一起使用，比如Raphaël。它基于本机

element1。getTransferorMToElement（element2）

可以获取两个元素之间的关系矩阵，在本例中，这两个元素是转换后的元素（例如

）和SVG根元素（

）。当然，您也可以使用其他元素，如图像、多边形、矩形等。顺便说一句，

getTransferMToElement

功能强大，用途广泛，例如，它可以用于展平由任意路径命令组成的路径变换（即使是使用Raphaël的path2curve首先转换为立方体的圆弧）这边：

SVGElement.prototype.getTransformToElement=
SVGElement.prototype.getTransformToElement | |函数（elem）
{ 
返回elem.getScreenCTM（）.inverse（）.multiply（this.getScreenCTM（））；
};
函数获取度量（el）{
函数pointToLineDist（A、B、P）{
var nL=数学sqrt（（B.x-A.x）*（B.x-A.x）+（B.y-A.y）*（B.y-A.y））；
返回Math.abs（（P.x-A.x）*（B.y-A.y）-（P.y-A.y）*（B.x-A.x））/nL；
}
函数区（点1、点2）{
var xs=0，
ys=0；
xs=point2.x-point1.x；
xs=xs*xs；
ys=点2.y-点1.y；
ys=ys*ys；
返回Math.sqrt（xs+ys）；
}
var b=el.getBBox（），
objDOM=el，
svgDOM=objDOM.ownerSVGElement；
//获取从局部到全局的矩阵
var matrix=svgDOM.getTransformToElement（objDOM）.inverse（），
oldp=[[b.x，b.y]，[b.x+b.width，b.y]，[b.x+b.width，b.y+b.height]，[b.x，b.y+b.height]，
pt，newp=[]，
obj={}，
i、 pos=正无穷大，
neg=数字负无穷大，
minX=pos，
minY=pos，
maxX=负，
maxY=neg；
对于（i=0；i<4；i++）{
pt=svgDOM.createSVGPoint（）；
pt.x=oldp[i][0]；
pt.y=oldp[i][1]；
newp[i]=pt.矩阵变换（矩阵）；
如果（newp[i].xmaxX）maxX=newp[i].x；
如果（newp[i].y>maxY）maxY=newp[i].y；
}
//下一个是指转换对象本身，而不是bbox
//newp[0]-newp[3]是变换对象的角点
//从左上角开始按顺时针顺序排列的点
obj.newp=newp；//角点数组
obj.width=pointToLineDist（newp[1]，newp[2]，newp[0]）||0；
obj.height=pointToLineDist（newp[2]，newp[3]，newp[0]）||0；
obj.toplen=dist（newp[0]，newp[1]）；
obj.rightlen=dist（newp[1]，newp[2]）；
obj.bottomlen=dist（newp[2]，newp[3]）；
obj.leftlen=dist（newp[3]，newp[0]）；
//下一个是指变换对象的边界框
obj.BBx=minX；
obj.BBy=minY；
obj.BBx2=maxX；
obj.BBy2=最大值；
obj.BBwidth=maxX-minX；
obj.BBheight=maxY-minY；
返回obj；
}

我担心您会提到

getBBox

：（换句话说，我担心没有直接的对象方法来检索宽度和高度，我必须“手动”计算它们为什么这是一个问题？你能再解释一下你想做什么，以及为什么计算出的边界框是一个问题吗？当然，没有实际包含值的值，它必须被计算出来。在原始svg中，你只能得到作为对象的边界框。无论哪种方式，你都不能避免调用函数，它是tr我想写一个助手，给你数字般的宽度和高度。旋转和缩放后计算图像的大小不是问题，而是麻烦。我已经计算了