如何根据 javascript 中元素的距离更改图像大小

Question

我想画一条连接两个圆的线，但是当 window 重新调整大小时，两个圆之间的距离发生变化，因此线条图像的高度应相应变化。这是我现在拥有的，但它只在页面加载时执行一次，但我希望图像高度随着 window 重新调整大小时动态变化：

function getDistance(id1, id2){
    distX = id1.offsetLeft - id2.offsetLeft;
    distY = id1.offsetTop - id2.offsetTop;
    distance = Math.sqrt(distX*distX + distY*distY);
    return distance;
    console.log(distance);
}


var myImage = new Image(50, 100);

myImage.src = 'images/line.png';
myImage.height = getDistance(circle1, circle2);
document.getElementById("line").appendChild(myImage);

Answer 1

试试这个：

var myImage = new Image(50, 100);
myImage.id  = 'line-image';
myImage.src = 'images/line.png';
document.getElementById("line").appendChild(myImage);

window.onresize = function() {
   document.getElementById('line-image').height = getDistance(circle1, circle2);
}

Answer 2

您必须向 window 调整大小事件添加一个事件侦听器。

在代码末尾添加以下代码段：

window.addEventListener('resize', function(){
    myImage.height = getDistance(circle1, circle2);
}, false);

这样做而不是在 window.onresize 上分配事件允许将多个函数绑定到事件。

如果您的网站上加载了 jQuery，您也可以使用它：

$(window).bind('resize',function(){/*code*/});

如何根据 javascript 中元素的距离更改图像大小

How to change image size based on the element's distance in javascript

javascript

resize