javascript - 使用 Raphael.js 转换为绑定(bind)框

Question

我需要一些数学帮助。我正在尝试动态地改造我的Raphael set将元素添加到 Canvas 内给定的边界框。

例如，假设我的 Canvas (纸张)为 600 x 300，并且充满了路径。这些路径都在一个集合中。

现在我想用给定的边界框填充我的 Canvas 。边界框采用像素坐标。例如[[50,10]，[100,20]]

因此最终结果将是一个可以缩放和定位 SVG 元素的函数调用。这将导致 Canvas 被裁剪到坐标边界。

var bbox = [[50,10], [100,20]]
animateToBoundBox(set, bbox, duration);
function animateToBoundBox(set, bbox, duration) { /* beautiful code */ }

我认为实现这一点的方法是使用元素矩阵，但我不确定。您认为处理这个问题最优雅的方式是什么？

谢谢

Answer 1

其他答案是正确的 - 您想使用 setViewBox。

这是一个支持动画的版本。它并不完全漂亮，您必须查看页面源代码才能提取代码，但它应该或多或少完全符合您的要求。

这是作为 Raphael 扩展的 View 框动画:

Raphael.fn.animateViewBox = function animateViewBox( x, y, w, h, duration, easing_function, callback )
{
    var cx = this._viewBox ? this._viewBox[0] : 0,
        dx = x - cx,
        cy = this._viewBox ? this._viewBox[1] : 0,
        dy = y - cy,
        cw = this._viewBox ? this._viewBox[2] : this.width,
        dw = w - cw,
        ch = this._viewBox ? this._viewBox[3] : this.height,
        dh = h - ch,
        self = this;;
    easing_function = easing_function || "linear";

    var interval = 25;
    var steps = duration / interval;
    var current_step = 0;
    var easing_formula = Raphael.easing_formulas[easing_function];

    var intervalID = setInterval( function()
        {
            var ratio = current_step / steps;
            self.setViewBox( cx + dx * easing_formula( ratio ),
                             cy + dy * easing_formula( ratio ),
                             cw + dw * easing_formula( ratio ),
                             ch + dh * easing_formula( ratio ), false );
            if ( current_step++ >= steps )
            {
                clearInterval( intervalID );
                callback && callback();
            }
        }, interval );
}

(不是那么漂亮)演示在这里:http://voidblossom.com/tests/easedViewBox.php

如果您真的一心想使用变换(如果利用得当，它可能会带来一些好处，但与 View 框操作相比，通常会很脆弱)，还有另一个使用变换的示例，位于 http://voidblossom.com/tests/zoomByTransform.php .