Question

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

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

试试这个：

<product>
        <company>Team.com</company>
        <category>Category B // something</category>
        <brand>New Nordic > Healthcare æøå</brand>
        <product_name>Name B</product_name>
        <productid>9489</productid>
        <description>Active Legs? Buy it now for free</description>
        <price>188.00</price>
</product>

Answer 2

您必须向窗口调整大小事件添加事件侦听器。

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

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

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

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

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

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

2 个答案: