javascript - 如果只存在总宽度和一些坐标数组，则获取适当的 x 和宽度

Question

关于增强部分的问题。

我有一张图表，在图表后面我想用条纹覆盖整个背景。图表上有垂直线，应该在视觉上划分条纹。

所以我有下一个数据:1) Canvas 的总宽度，假设为6002) Canvas 上坐标为 x 的数组，假设有类似 [100,250,300,600]

的内容

我需要获取每个条纹的宽度和下一个点。我可以通过以下代码生成它们:

let linesArray = [100,250,300,500]; 
linesArray.unshift(0);
let totalWidth = 500;
let stripes = linesArray.map((x, i) => {
let width = (i === 0) ? linesArray[i+1] : linesArray[i+1] !== undefined ? linesArray[i+1] - x : totalWidth - x;

return <rect x={x} width={width }></rect>
})

但说实话，我不喜欢它的样子，也许有更好的解决方案来获得所需的结果。

Answer 1

您的代码中有一个小错误。在第 5 行的表达式 width - x 中，您可能会想到背景的总宽度。我们称之为 totalWidth。那么你的代码可以是:

let totalWidth = 1000;

let linesArray = [100,250,300,500]; 
linesArray.unshift(0);

let stripes = linesArray.map((x, i) => {
    let width = linesArray[i+1] ? linesArray[i+1] - x - 1 : totalWidth - x;

    return <rect x={x} width={width}></rect>
})

编辑:添加 - 1 以确保条纹不重叠