Question

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

例如，假设我的画布（纸张）是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 */ }

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

由于

Answer 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的转换的示例。

Answer 2

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

setViewBox(bbox[0][0], bbox[0][1], bbox[1][0] - bbox[0][1], bbox[1][1] - bbox[0][0])

Answer 3

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

使用Raphael.js转换为绑定框

3 个答案: