raphael js, измените размер холста, затем установите ViewBox, чтобы показать все элементы

У меня проблема с моим холстом.

Мой холст в первой ширине = 1300, высоте = 500

Затем я изменяю его размер до ширины = 800 пикселей, высоты = 500.

Я пытаюсь установить setViewBox, чтобы увеличить его. Но мышь не фиксируется с элементом, когда я их перетаскиваю.

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

как рассчитать???

Спасибо за помощь. :)


svg raphael
person Peter89    schedule 27.12.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете рассчитать необходимые размеры, используя такой подход:

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.

Если вы хотели проявить немного фантазии, вы всегда можете анимировать окно просмотра, чтобы оно плавно переходило к новому размеру. Функционально не важно, но умеренно сексуально...

person Kevin Nielsen    schedule 27.12.2012
comment
Упс, если мои элементы не расположены в правильном положении, мой холст имеет максимальную ширину и высоту. Зум только фиксирует все элементы. Мне нужно увеличить и исправить окно :) установить высоту ширины окна просмотра, чтобы исправить окно "> stackoverflow.com/questions/14064402/ - person Peter89; 28.12.2012