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

潘正在运作良好，但需要进行调整：

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

你必须保持你的坐标同步，这必须完全。如果您通过实验或相对值调整某些比例值和平移偏移，您可能会关闭。

对于缩放，s和平移，t，应用于CSS中的图像，找到常量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

非常感谢您的回答。经过一些工作后，我了解到zoom事件后来触发了pan事件。所以我只在pan事件函数中进行翻译（包括平移和缩放），如下所示：

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变焦对齐

2 个答案: