svg - raphael js，调整画布大小，然后 setViewBox 显示所有元素

Question

我的画布有问题。

我的画布第一个宽度 = 1300，高度 = 500

然后我将其调整为宽度 = 800px，高度 = 500

我尝试 setViewBox 来缩放它。但是当我拖动它们时，鼠标无法与元素一起修复。

@canvas.resize(800, 500)
@canvas.setViewBox(0,0, ??, ??)

怎么计算？？？

感谢您的帮助。:)

Answer 1

您可以使用以下方法计算必要的尺寸：

function recalculateViewBox( canvas )
{
    var max_x = 0, max_y = 0;
    canvas.forEach( function( el )
        {
            var box = el.getBBox();
            max_x = Math.max( max_x, box.x2 );
            max_y = Math.max( max_y, box.y2 );
        } );
    if ( max_x && max_y )
        canvas.setViewBox( 0, 0, max_x, max_y );
}

本质上，您只需遍历画布的内容并构建一个元边界框，然后将 viewBox 调整为它。

如果你想变得有点花哨，你总是可以为 viewbox 设置动画，让它流畅地过渡到新的尺寸。在功能上不重要，但适度性感......