拉斐尔js，调整画布大小，然后setViewBox以显示所有元素 [英] raphael js, resize canvas then setViewBox to show all elements

问题描述

我的画布有问题.

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

My canvas in first width = 1300, height = 500

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

Then I resize it to width = 800px, height = 500

我尝试使用setViewBox对其进行缩放.但是，当我拖动鼠标时，鼠标不能用元素固定.

I try setViewBox to zoom it. But mouse not fix with element when I drag them.

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

如何计算?

感谢您的帮助. :)

推荐答案

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

You can calculate the necessary dimensions using an approach like this:

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调整为它即可.

Essentially, you simply walk the contents of the canvas and construct a meta-bounding box, then adjust the viewBox to it.

如果想要花些钱，可以随时对视图框进行动画处理，以使它流畅地过渡到新的尺寸.在功能上并不重要，但是中度性感 ...

If you wanted to get a little fancy, you could always animate the viewbox so that it transitions fluidly to it's new size. Not functionally important, but moderately sexy...

这篇关于拉斐尔js，调整画布大小，然后setViewBox以显示所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！