Алгоритмы заливки
Именно ListItem, что вы завернули в Card, вызывает массивное заполнение, которое вы видите. Если вы удалите его, вы обнаружите, что карты гораздо ближе друг к другу.
Затем можно обернуть карту в компонент TouchableOpacity или аналогичный, что позволит вам провести сенсорное событие, а также даст вам больший контроль над пространством элементов, настроив стиль на TouchableOpacity.
Не забудьте импортировать его
import { TouchableOpacity } from 'react-native';
Вот как вы можете обновить renderItem
renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() =>
this.props.navigate(this.state.navigateTO,{
id:item['id'],
title:item['title'],
top_image:item['top_image'],
token:this.state.token,
lan:this.state.lan,
type:this.state.type,
}
)}
style={{ padding: 10 }} // adjust the styles to suit your needs
>
<Card style={{height:320, width: 200}}>
<CardItem cardBody>
<View
style={{height:200, width: 200, backgroundColor:'green'}}/>
</CardItem>
<CardItem>
<Left>
<Body>
<Text >{item['title']}</Text>
<Text note>{item['city']}</Text>
</Body>
</Left>
</CardItem>
</Card>
</TouchableOpacity>
);
}
5 ответов
Статья Wikipedia довольно хороша. Пока Ваши сетки являются маленькими, примерно что-либо будет работать.
Ранее этой осенью я сделал некоторую заливку на отсканированных изображениях на 10 мегапикселей. (Проблема состояла в том, чтобы удалить черные края из книжных страниц, которые были отсканированы на фотокопировальном устройстве.) В этом случае существует только два цвета, таким образом, я по существу рассматривал проблему как поиск в неориентированном графе с каждым пикселем, подключенным к его соседям вдоль четырех направлений компаса. Я поддержал отдельный битовый массив для отслеживания, которых посетили пиксели.
Основные результаты были
Не пробуйте рекурсивный поиск в глубину. Вы действительно хотите явную структуру данных.
Вспомогательная очередь использует намного меньше пространства, чем стек. Приблизительно в сорок раз меньше пространства. Другими словами, предпочтите поиск в ширину поиску в глубину.
Снова, эти результаты применяются только к сеткам с несколькими мегапикселями. На хорошей маленькой сетке как один показанный в Вашем вопросе, должен работать любой простой алгоритм.
Мы должны были программировать это для школы:
1: stuff the start pixel into a queue, note its color. note it as added.
2: begin picking a pixel off the queue. If it's similar to the start pixel:
2: put all its neighbours into the queue
for each added pixel, note it's added. if already noted for a pixel, don't
add it anymore.
3: color it with the destination color.
3: nonempty => jump back to 2
4: empty => we are finished
В зависимости от того, делаем ли мы с 8 соседями или с 4 соседями, мы проверяем все 8 соседних пикселей или только пиксели слева/справа или выше/ниже определенного пикселя. Вот код (использующий ImageJ. Я удалил некоторый код, не релевантный). Я надеюсь, что это имеет смысл, это - Java. Просто попросите далеко вопросы:
public class Uebung1_2 implements PlugInFilter, MouseListener {
private ImageProcessor ip;
boolean[] state;
int[] pixels;
Queue<Integer> nextPixels;
int threshould;
/**
* adds one pixel to the next-pixel queue only if it's not
* already added.
*/
void addNextPixel(int p) {
if(!state[p]) {
nextPixels.add(p);
state[p] = true;
}
}
boolean pixelsSimilar(int color1, int color2) {
int dr = Math.abs(((color1 >> 16) & 0xff) -
((color2 >> 16) & 0xff));
int dg = Math.abs(((color1 >> 8) & 0xff) -
((color2 >> 8) & 0xff));
int db = Math.abs(((color1 >> 0) & 0xff) -
((color2 >> 0) & 0xff));
return ((double)(dr + dg + db) / 3.0) <= threshould;
}
/**
* actually does the hard work :)
* @param x the x position from which to start filling
* @param y the y position from which to start filling
*/
private void doFill(int x, int y, boolean connect8) {
// first, add the start pixel
int width = ip.getWidth(),
height = ip.getHeight();
/* for 8bit, we just gonna take the median of rgb */
Color colorC = ij.gui.Toolbar.getForegroundColor();
int color = colorC.getRGB();
int firstPixel = ip.get(x, y);
// go on with the mainloop
addNextPixel(y * width + x);
while(!nextPixels.isEmpty()) {
int nextPixel = nextPixels.remove();
int pixel = pixels[nextPixel];
if(pixelsSimilar(pixel, firstPixel)) {
// yay it matches. put the neighbours.
int xN = nextPixel % width,
yN = nextPixel / width;
/* the three pixels above */
if(yN - 1 >= 0) {
if(connect8) {
if(xN + 1 < width) {
addNextPixel(nextPixel - width + 1);
}
if(xN - 1 >= 0) {
addNextPixel(nextPixel - width - 1);
}
}
addNextPixel(nextPixel - width);
}
/* pixels left and right from the current one */
if(xN > 0) {
addNextPixel(nextPixel - 1);
}
if(xN + 1 < width) {
addNextPixel(nextPixel + 1);
}
/* three pixels below */
if(yN + 1 < height) {
if(connect8) {
if(xN + 1 < width) {
addNextPixel(nextPixel + width + 1);
}
if(xN - 1 >= 0) {
addNextPixel(nextPixel + width - 1);
}
}
addNextPixel(nextPixel + width);
}
/* color it finally */
pixels[nextPixel] = color;
}
}
}
@Override
public void run(ImageProcessor ip) {
ij.WindowManager.getCurrentImage().getCanvas().addMouseListener(this);
this.ip = ip;
this.pixels = (int[])ip.getPixels();
this.state = new boolean[ip.getPixelCount()];
this.nextPixels = new LinkedList<Integer>();
}
@Override
public int setup(String arg0, ImagePlus arg1) {
return DOES_RGB;
}
@Override
public void mouseClicked(MouseEvent e) {
ij.WindowManager.getCurrentWindow().getCanvas().removeMouseListener(this);
ij.gui.GenericDialog g = new GenericDialog("Please enter parameters");
g.addChoice("connection", new String[]{"4-connect", "8-connect"}, "8-connect");
g.addNumericField("Threshould (0..255)", 0.0, 3);
g.showDialog();
boolean connect8 = g.getNextChoice().equals("8-connect");
threshould = (int) g.getNextNumber();
doFill(e.getX(), e.getY(), connect8);
ij.WindowManager.getCurrentImage().draw();
}
}
Wikpedia предоставляет некоторые псевдопримеры кода различных методов заливки на их статье Заливки. Какая техника, которую Вы выбираете, зависит от приложения.
Помните, что заливка может легко быть поточной (подобный тому, как quicksort может быть).
Во всей справедливости это должно быть довольно просто. Так как у Вас есть основная структура мозаики так или иначе, алгоритм был бы довольно прост:
Select Tile To Fill:
Fill Till
Check neighbouring Tiles - If Empty Then Fill
Repeat, for all filled tiles.
Отказ от ответственности: Вышеупомянутое является очень простым описанием. Существует много ссылок в сети, которые объясняют это намного лучше, чем я могу.