09.01.2017, 02:47
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
|
Увеличение массива
Создавая карту блоков, я решил сохранять ее в двумерном массиве, позначая соответствующие блоки числами.
Вот например, у меня есть участок карты 5x7
и он задается таким вот массивом:
map = [
[1,1,0,0,1],
[1,0,0,0,1],
[1,0,0,1,1],
[1,0,0,0,1],
[1,0,0,0,1],
[1,1,1,0,1],
[1,1,1,1,1],
]
где "1" = присутствие блока, а "0" = соответственно, отсутствие. Может быть только два этих состояния, т.е массив ограничивается числами "1" или "0", в нем нету "2" или чего-то еще.
Допустим, мне нужно увеличить этот участок к размерам 5х10, или к какому-то иному. Но при этом, нужно чтобы в массиве не оставалось пустых мест, а они записывались соседними значениями, или что-то типа того. Примерно так работают фоторедакторы, которые увеличивают растровые изображения, додавая на место появившихся пикселей какие-то новые.
Так вот вопрос: есть ли какой-то не очень тяжелый алгоритм с реализацией на JS? Может кто-то вкратце изложить, как решить эту проблему, или хотя бы скинуть ссылку на хороший туториал?
Уже искал, и ниче не нашел. (Да, значит плохо искал.)
|
|
09.01.2017, 08:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от TimohaP
|
|
Примерно так работают фоторедакторы, которые увеличивают растровые изображения, додавая на место появившихся пикселей какие-то новые.
|
Ни какие-то новые, а все определяется методом интерполяции. Она бывает линейная (для изображений не используется), билинейная, бикубическая и еще много других. При билинейной интерполяции берется средневзвешенное значение пикселей 2х2 для нового пикселя, а в бикубической 4х4.
В сети можно найти описания алгоритмов интерполяций, используйте подходящий из них. |
|
09.01.2017, 16:43
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
Окей, спасибо, кажется, это то, что мне нужно  |
|
10.01.2017, 22:50
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
Я решил эту проблему, но, правда, своим способом, который мне больше подходит.
Может, если кому-то надо будет делать что-то подобное, я оставлю тут ссылку, как я это делал с подробной документацией кода. Может кто-то что да и почерпнет для себя.
JSBin/yeqisa/9 |
|
11.01.2017, 00:14
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от рони
|
|
а как то через canvas масштабировать?
|
Это надо с индексированной палитрой работать, а canvas с этим форматом не работает. А при полноцветном изображении будет кошмар в результате, хотя если PNG и работать не с RGB, а HSB, то можно попробовать. |
|
11.01.2017, 01:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
TimohaP,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {border-collapse:collapse; display:inline-block; }
table td {width:15px; height:15px; padding:0; box-shadow:0 0 1px 0 #7395BE;border: 1px solid #000000;}
/*Стиль для заполненных ячеек (f - filled)*/
.f {background:#7395BE}
/*Стиль для пустых ячеек (f - empty)*/
.e {background:#E8F2F7}
</style>
</head>
<body>
<script>
map = [
[1,0,1,0,1], //карта значений (смотри, что получилось в результате (вкладка output) и сравни с этим массивом)
[1,0,1,0,0],
[1,0,1,1,0],
[1,0,0,0,1],
[1,0,0,0,1],
[1,0,1,1,1],
[1,0,1,1,1],
[1,0,0,0,1],
[1,0,0,0,1],
[1,1,0,0,1],
[1,1,0,1,1],
[1,0,0,1,1],
[1,0,0,1,1],
[1,1,0,1,1],
[1,1,1,1,1],
[1,0,1,1,1],
[1,1,1,0,1],
[1,0,1,0,1],
[1,0,1,1,1],
[1,1,0,1,1],
[1,1,0,0,1]
];
function fn(d, f) {
var c = [],
b = d.length;
d.forEach(function(a) {
for (var b = 0; b < f; b++) c.push(a)
});
for (var e = [], a = 0; a < c.length; a += b) e.push(c.slice(a, a + b));
return e.map(function(a) {
return +(a.join("").split("1").length - 1 >= b / 2)
})
};
function createTable( map , num) {
var table, row, data;
table = document.createElement('table');
for (var k = 0; k < map.length; k++) {
row = table.insertRow(k);
var len = fn(map[k], num);
for (var m = 0; m < len.length; m++) {
data = row.insertCell(m);
data.classList.add(len[m] ? 'f' : 'e')
}
table.appendChild(row);
}
return table;
}
for (var i=5; i<30; i+=3) {
document.body.appendChild(createTable( map , i));
document.body.appendChild(document.createTextNode(i));
document.body.appendChild(document.createElement('br'))
}
</script>
</body>
</html>
|
|
11.01.2017, 05:21
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
|
laimas,
я, кстати, думал над этим.
очень просто будет реализовать увеличение картинок в одной градиации цвета, а если увеличивать картинку в HSB, то тут проблема будет только в том, чтобы вычислить средний оттенок (параметр H).
но в конце концов, есть же в интернете какая-то статья, как это делать, и как это делают "серьезные ребята".
|
|
11.01.2017, 08:19
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от TimohaP
|
|
а если увеличивать картинку в HSB
|
Нельзя, изображение, это всегда RGB, и canvas будет работать с RGB. А вот после преобразования изображения в градациях серого легко в цветовой модели HSB получить только по установленному порогу уровня яркости ячейки условно 1 и условно 0. Проделать это же самое в цветовой модели RGB даже с градацией серого будет очень сложно.
PS. Алгоритм преобразования RGB в HSB на всевозможных языках описан многократно в сети, а это о цветовых моделях.
Последний раз редактировалось laimas, 11.01.2017 в 08:28.
|
|
|
|
