1

我需要一些数学帮助。我正在尝试将我的 Raphael元素集动态转换为画布内的给定绑定框。

例如，假设我的画布（纸）是 600 x 300 并且充满了路径。这些路径都在一个集合中。

现在我想用给定的绑定框填充我的画布。绑定框位于像素坐标中。例如 [[50,10], [100,20]]

所以最终结果将是一个函数调用，它将缩放和定位 SVG 元素。这将导致画布被裁剪到坐标边界。

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

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

谢谢

4

3 回答 3

1

其他答案是正确的——你想使用 setViewBox。

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

这是作为 Raphael 扩展的视图框动画：

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

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

于 2013-01-30T20:21:44.240 回答
0

不确定我是否完全理解您要查找的内容，但听起来您想将视图缩放到特定的边界框。你看过setViewBox函数吗？基本上你的函数会这样称呼它：

setViewBox(bbox[0][0], bbox[0][1], bbox[1][0] - bbox[0][1], bbox[1][1] - bbox[0][0])
于 2013-01-30T19:05:09.310 回答
0

据我所知，您想要完成的所有事情都会Paper.setViewBox()在动画中得到更好的处理。见http://raphaeljs.com/reference.html#Paper.setViewBox

于 2013-01-30T19:05:48.043 回答