CODEWITHSUNDEEP
cytoscape.js
CarlHaberfeld
CarlHaberfeld

Reputation: 3

Cytoscape zoom alignment

I'm having an issue with my background image maintaining proper alignment with the network image, when using mouse to zoom in or out. Without zoom, the network matches the background. With zoom in however, the background shifts right (out of alignment). The background image stays same width as network, only shifted. Same with zoom out, but to the left.

In order to get zoom to work to this degree, I needed to adjust zoom factor:

cy.on('zoom', function(evt){
var newpct = 135.0 * cy.zoom();
document.getElementById('cy').style.backgroundSize = newpct + '%';                  
});

The header CSS for image, etc:

#cy {
    background-image: url("background6.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;      
}

The image is from an 11" x 8.5" MS Publisher file, saved as a PNG

Pan is working well, but an adjustment was needed:

cy.on('pan', function(evt){
var pan = cy.pan();
var x = pan.x - 92;
var y = pan.y - 48;
document.getElementById('cy').style.backgroundPosition = x +'px ' + y + 'px ';
});

Any help is much appreciated

Upvotes: 0

Views: 1496

Answers (2)

CarlHaberfeld
CarlHaberfeld

Reputation: 3

Thank you so much for your answer. After some more work I learned that the zoom event was afterwards triggering the pan event. So I put the translation (covering both pan and zoom shifts) only in pan event function, like this:

var ax = -120 * cy.zoom();
var ay = -60 * cy.zoom();
var x = pan.x + ax;
var y = pan.y + ay;
document.getElementById('cy').style.backgroundPosition = x +'px ' + y + 'px ';

It is working perfectly now. Thanks again for your support!

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

You have to keep your co-ordinates synched, and this has to be done exactly. If you adjust some scale values and translation offsets experimentally or with relative values, you'll probably be off.

For scale, s, and translation, t, applied to your image in CSS, find the constants s0 and t0 such that

s = zoom * s0 and t = { x: pan.x + t0.x, y: pan.y + t0.y }

You can find s0 and t0 by aligning the image at zoom 1 and pan (0, 0).

You can't use percents for anything; you ought to use pixels (or ems if you measure everything in ems).

Upvotes: 1

Related Questions