Cytoscape 缩放比对

Question

在使用鼠标放大或缩小时，我的背景图像与网络图像保持正确对齐时遇到问题。没有缩放，网络匹配背景。然而，随着放大，背景向右移动（不对齐）。背景图像与网络保持相同的宽度，只是移动了。与缩小相同，但向左。

为了让缩放工作到这个程度，我需要调整缩放系数：

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

header CSS 图片等:

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

图像来自 11" x 8.5" MS Publisher 文件，另存为 PNG

Pan 运行良好，但需要进行调整：

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 ';
});

非常感谢任何帮助

Answer 1

你必须保持你的坐标同步，而且必须准确地做到这一点。如果您通过实验或相对值调整某些比例值和平移偏移，您可能会偏离。

对于在 CSS 中应用于图像的缩放 s 和平移 t，找到常数 s0 和 t0 使得

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

您可以通过在缩放 1 和平移 (0, 0) 处对齐图像来找到 s0 和 t0。

你不能对任何东西使用百分比；你应该使用像素（或 ems，如果你用 ems 测量所有东西）。

Answer 2

非常感谢您的回答。经过更多的工作后，我了解到缩放事件随后触发了平移事件。所以我把翻译（包括平移和缩放移位）只放在平移事件函数中，像这样：

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 ';

它现在运行良好。再次感谢您的支持！

Cytoscape 缩放比对

Cytoscape zoom alignment

cytoscape.js