Question

我有一个可以使用各种颜色动态设计的表格以及用作这些颜色参考的颜色调色板。当用户完成着色时，我想将文件编译为JSON。我同样可以获取必要的值：

// note _colors is a global variable declared elsewhere

var $rowSelect = $("#rowSelect");
var $colSelect = $("#colSelect");
var $colorBoard = $("#colorBoard");
var $upload = $("#upload");

$upload.on("click", function() {
    var numRows = Number($rowSelect.val());
    var numCols = Number($colSelect.val());

    var pixels = [];
    var colors = [];
    var comp_colors = [];

    var $rows = $colorBoard.children();
    for(var i = 0; i < numRows; i++) {
        var $cols = $rows.eq(i).children();
        for(var ii = 0; ii < numCols; ii++) {
            $cell = $cols.eq(ii);
            pixels.push(Number($cell.attr("data-colorid")));
        }
    }

    var usedColors = pixels.filter((v, i, a) => a.indexOf(v) === i);

    for(var i = 0; i < _colors.length; i++) {
        colors.push(_colors[i] ? _colors[i].color.getColor() : null);
        if(_colors[i] && usedColors.includes(i) && !comp_colors.includes(colors[i])) comp_colors.push(_colors[i].color.getColor());
    }
}

由于我的UI中可以删除，复制或不使用颜色，因此我将原始颜色数组colors清理为comp_colors数组。例如，未处理颜色的数组可能如下所示：[null, "#EF1A1A", null, "#40E255", "#0B1DE3", "#FFFFFF", "#FFFFFF"]。如果我们的像素数组中实际不存在"#0B1DE3"，则清理后的版本将如下所示：["#EF1A1A", "#40E255", "#FFFFFF"]。

问题是清理颜色数组会偏移pixels数组的值用于引用颜色的索引。例如，使用上面的颜色情况，获取的pixels数组可能如下所示：[1,3,3,1,5,6,5,1,3,6]，但已清理颜色集的修订版本将为：[0,1,1,0,2,2,2,0,1,0]。

将这些值更正为适当的索引的最有效方法是什么？

Answer 1

我找到了一种简洁的方法，但我觉得它不是很有效率。我必须遍历每个像素来实现这一点，这对于大型创作而言可能是昂贵的。新pixels列表将加载到comp_pixels：

for(var i = 0; i < cells.length; i++) comp_pixels.push(comp_colors.indexOf(colors[pixels[i]]));

调整重组数组的链接索引

1 个答案: