Рассчитать видимую область в протоисе при использовании зума - PullRequest
Новая
       27

Рассчитать видимую область в протоисе при использовании зума

2 голосов
/ 23 марта 2011

Есть ли способ получить видимую область панели при масштабировании. я есть ориентированный граф силы, и я заинтересован в получении всех элементы, которые находятся в видимой области после события масштабирования. Какие-либо предложения? Спасибо

1 Ответ

2 голосов
/ 04 апреля 2011

Вы можете получить доступ к текущей матрице преобразования панели с помощью параметра transform.Итак, в следующем примере: 

var vis = new pv.Panel()
    .width(200)
    .height(200);

var panel = vis.add(pv.Panel)
    .event("mousewheel", pv.Behavior.zoom(1))
    .fillStyle('#ccc');

var dot = panel.add(pv.Dot)
    .data([[25,25],[25,75],[75,25],[75,75]])
    .top(function(d) d[0])
    .left(function(d) d[1])
    .size(30)
    .fillStyle('#999');

vis.render();

Если вы загрузите этот пример, а затем немного увеличите масштаб, вы можете получить доступ к текущей матрице преобразования следующим образом: 

var t = panel.transform(),
    tk = t.k, // scale factor, applied before x/y
    tx = t.x, // x-offset
    ty = t.y; // y-offset

Вы должны бытьвозможность определить, находится ли дочерняя метка (например, в этом примере dot) в видимой области, применяя матрицу преобразования к ее параметрам top и left, а затем проверяя, находятся ли они в пределах панелиоригинальная ограничительная коробка (0,0,200,200).Для dot выше, вы можете проверить так: 

function(d) {
    var t = panel.transform(),
        // assuming the current dot instance is accessible as "this"
        x = (this.left() + t.x) * t.k, // apply transform to dot x position
        y = (this.top() + t.y) * t.k;  // apply transform to dot y position
    // check bounding box. Note that this is a little simplistic - 
    // I'm just checking dot center, not edges
    return x > panel.left() && x < (panel.left() + panel.width()) &&
           y > panel.top() && y < (panel.top() + panel.height());
}
...