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;

您可以使用辅助方法扩展Raphael.el(如果您小心的话),如果这对您有帮助,可以直接提供宽度和高度.您可以使用边界框方法并返回您感兴趣的部分,但为了更高效,我使用元素上的矩阵属性和属性的位置/宽度/高度仅计算了请求的属性.

(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();

在您加入Raphael之后,只需添加脚本即可.请注意,它仅适用于具有宽度,高度,x和y属性的元素,适用于图像. Raphael实际上是根据路径数据计算边界框,它会转换路径中的所有点,并在转换它们后获取最小/最大x / y值.

标签：javascript,svg,raphael
来源： https://codeday.me/bug/20190926/1819313.html