Question

我试图找出一个案例，我有一条垂直的绿线代表一堆层和一个红色的＃34;木板＆＃34;表示当前聚焦的图层不在堆栈中。

我需要确保选择最顶层时 - 木板位于绿线的顶部。当选择第一层（最深层）时，木板位于绿线的底部。

使用下面的功能我可以达到＃1条件，但每当我选择最深的层时 - 我不能将红色木板放在底部。

我知道这应该是学校级别的数学练习，但我无法弄明白; /

更新：所以在片段中，如果我将执行当前的第1层和总N /无论如何。我不能＆＃34;降落＆＃34;将木板放到线的底部

UPDATE2：好的我在函数中添加了一些逻辑，现在结果就是我需要的。 PRoblem是我不确定我通过适当的逻辑实现了这一点。至少我真的不明白我做了什么以及为什么现在有效。

＆＃13;

// trying to figure out better function to indicate which is current layer:
// height of the green line is 280.

var currentItemLayer = 3;
var totalLayers = 4;
var plank = document.getElementById("plank");

setPlankPositionAccordingToLayer = function(currentItemLayer, totalLayers) {
    var blockCount = Math.max(1, totalLayers - 1);
    var blockSize = 280*(1/blockCount);
    var layer;
    if (blockCount === 1) {
      layer = 100;
    } else {
      layer = 380-(currentItemLayer*blockSize);
    }
    plank.setAttribute("y", layer);
    console.log(layer);
};

setPlankPositionAccordingToLayer(currentItemLayer, totalLayers)

＆＃13;

<body>
<svg id="mainSVG"
viewBox="0 0 480 480"
preserveAspectRatio="xMidYMin"
width="100%"
height="100%"
background-color="white"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<line x1="240" y1="100" x2="240" y2="380" style="stroke: green"/>
<rect id="plank" x="230" y="240" width="20" height="2"/>
</svg>
</body>

＆＃13;

根据位置放置在堆栈中 - 帮助找出函数

0 个答案: