Cytoscape 缩放对齐

Question

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

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

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

图片的头部 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 ';

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