背景比例，保持画布中绘制元素的位置

Question

我使用一个结合了 div 背景图像和画布的系统。这个系统让我像有这样的灯光一样出现背景：

我允许用户放大/缩小背景。但我需要保留每个绘制的元素位置。今天我有这个：

放大后：

墙的高度和宽度已正确调整大小，但其位置随比例移动。

对于我的背景代码：

document.getElementById("background").style.transform = "translate("+backgroundTransform.x+"px,"+backgroundTransform.y+"px) scale("+backgroundTransform.zoom+","+backgroundTransform.zoom+")";

这对于绘制的元素：

        this.x = function(x){ 
        if(x != undefined)
            this.position.x = x;

        return this.position.x + backgroundTransform.x;
    },
    this.y = function(y){ 
        if(y != undefined)
            this.position.y = y;
        return this.position.y + backgroundTransform.y;
    },
    this.width = function() {return this.baseWidth * this.globalZoom()};
    this.height = function() {return this.baseHeight * this.globalZoom()};

如果您需要任何信息，请告诉我。

谢谢。

Answer 1

我用画布背景切换 div 背景。现在它们可以同时扩展。