如何在缩放后确定Raphael对象的大小旋转吗？ [英] How to determine size of Raphael object after scaling & rotating it?

问题描述

如果我要创建一个初始大小为 [w1，h1] 的Raphael.js对象，请使用 transform（）方法，我后来如何检索其新尺寸 [w2，h2] ？因为调用 image.attr（width）会返回w1，即初始宽度，而不是转换后的宽度。

If I were to create an image as a Raphael.js object with the initial size [w1,h1], then scale it using the transform() method, how would I afterward retrieve its new size [w2,h2]? Because calling image.attr("width") returns w1, the initial width, not the width after the transformation.

我知道你可能会说我应该简单地将w1和h1与缩放因子相乘，但大多数情况下，也会应用旋转变换，这会使事情变得更加麻烦。

I know you might say that I should simply multiply w1 and h1 with the scaling factors, but most of the times, a rotation transformation is also applied, which makes things a little more cumbersome.

简而言之，Raphael.js中是否有一个方法可以检索对象的正确大小，而不管可能应用于它的任何转换？

So in short, is there a method in Raphael.js that retrieves the correct size of an object, regardless of any transformations that may have been applied to it?

推荐答案

有一种方法可以检索包含和不包含转换的元素的边界框。

There is a method for retrieving the bounding box of an element with and without transformation.

通过转换：

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

没有转换：

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

---

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

---

You can extend Raphael.el with helper methods (if you are careful) that provide the width and height directly if this helps you. You could just use the bounding box method and return the portion that you're interested in, but to be a bit more efficient I have calculated only the requested property using the matrix property on the elements and the position/width/height from attributes.

(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值。

Just include the script after you include Raphael. Note that it only works for elements with a width, height, x and y attributes, which is suitable for images. Raphael actually computes the bounding box from the path data, which transforms all of the points in the path and gets the min/max x/y values after transforming them.

这篇关于如何在缩放后确定Raphael对象的大小旋转吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！