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调整为它。

如果想要有点花哨，你可以随时为视图框设置动画，使其流畅地过渡到它的新尺寸。功能不重要，但moderately sexy ...

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

1 个答案: