предисловие
Две недели назад младший брат станция B плюс мое микро-письмо, мой совет о том, как получить эту карту во Flutter в ...
Что-то похожее, я использовалflashсделал, в小程序также достигнуто. Хотя я не особо знаком с Flutter, я не подумал, что это слишком сложно, поэтому я согласился помочь этому младшему брату сделать демо, и он вежливо согласился помочь мне с этим.舰长.
Чтобы не публиковать большой фрагмент кода, часть кода в тексте предназначена только для справки, а не весь код, пожалуйста, заполните его самостоятельно после понимания или загрузите исходный код для изучения.
Выбор схемы рисования
Чем рисовать? Пример, который я дал младшему брату, должен использоватьcustompainterнарисовано, но в этой статье я буду использоватьWidgetДля достижения причина в том, что если графиков не так много, используйтеWidgetРазницы в производительности нет. используй это самcustompainterБудет немного сложнее реализовать
Например, показать картинку...
- использовать
Widget
Image.asset("图片路径");
- существует
Custompainterвнутри
ImageStream stream = AssetImage("图片路径", bundle: rootBundle).resolve(ImageConfiguration.empty);
void listener(ImageInfo frame, bool synchronousCall) {
final UI.Image image = frame.image;
//将Image绘制到画布上
canvas.drawImage(image, UI.Offset(60.0, 60.0), Paint());
stream.removeListener(ImageStreamListener(listener));
}
stream.addListener(ImageStreamListener(listener));
Импорт графического материала
Я подготовил два стиля сюжета и изображения двух деревьев, все они размещены в каталоге проекта Flutter.assetsПод содержанием
по этому мыpubspec.yaml(из проекта флаттераpackage.json), вы можете использовать следующий код для отображения изображения
Image.asset("assets/floor1.png");
Настроить макет
По сути, для этого сюжета нам нужен только массив для настройки. Но разве это 25 кусков земли? Мы строим массив длиной 25 для управления графиками
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
Теперь давайте добавим несколько новых строк, чтобы сделать представление графика в этом массиве более интуитивным?
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0
Это понятнее? Степень участка, поливается он или нет, и есть ли деревья, может быть представлена цифрами.Например, если ваши стили участка и дерева не превышают 10, то стиль участка представлен единицами 1-9. Тип представлен десятью цифрами от 0 до 9.
1,1,1,1,1,
1,11,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1
Это означает, что на всех участках используется рисунок №1, а дерево стиля №1 посажено на 2-м участке во 2-м ряду.
Конечно, в этом массивеMapТакже возможно, не обязательно чистые числа. Это может содержать больше информации, но в этом случае достаточно цифр.
Чтобы понять конфигурацию, нам нужно только использоватьWidgetПросто построй его
компоновка сборки
Здесь я используюStack+Positionedпостроить макет
Комбинация Stack и Positioned похожа на
cssвнутреннийposition:absolute
List<int> map = [
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1
];
for(int i = 0;i<map.length;i++){
all.add(Positioned(
left: (i%rowCount).floor()*floorSize.width,
top:(i/rowCount).floor()*floorSize.height,
child: Text("$i")
));
}
Это отсортировано по горизонтали
Если вам нужно расположить серийный номер вертикально, вам нужно только установить%а также/Обмен
left: (i/rowCount).floor()*floorSize.width,
top:(i%rowCount).floor()*floorSize.height,
Теперь выводим картинку сюжета
left: (i/rowCount).floor()*floorSize.width,
top:(i%rowCount).floor()*floorSize.height,
child: Image.asset("assets/floor1.png",width: floorSize.width,height: floorSize.height)
Поскольку график представляет собой ромб, нам также необходимо вычислить смещение
- Поднять на 50% по горизонтали
- Сдвинуться вправо по номеру вертикальной сортировки на 50%
- Расчет ширины и высоты пополам
int xIndex = (i/rowCount).floor();
int yIndex = (i%rowCount).floor();
Positioned(
left: xIndex*floorSize.width/2+yIndex*floorSize.width/2,
top:yIndex*floorSize.height/2-xIndex*floorSize.height/2
)
ТАДА!Мы удачно прописали сюжет, верно!
Теперь пусть графики отображают изображение графика в виде массива
List<int> map = [
1,1,1,1,1,
1,1,1,1,1,
1,1,2,1,1,
1,1,1,1,1,
1,1,1,1,1
];
Image.asset("assets/floor${map[i]}.png")
добавить дерево
Ранее мы разрабатываем формат конфигурации个位数表示地块，十位数表示树种类, то код такой
int floorType = map[i]%10;//数字取个位
int treeType = ((map[i]%100)/10).floor();//数字取十位
Осталось только отобразить изображение дерева.
List<int> map = [
1,1,1,1,1,
1,1,51,1,1,
1,1,42,1,1,
1,1,51,1,1,
1,1,1,1,1
];
int treeType = ((map[i]%100)/10).floor();
if(treeType>0){
all.add(Positioned(
left: xIndex*floorSize.width/2+yIndex*floorSize.width/2-treeSize.width*.3,
top:yIndex*floorSize.height/2-xIndex*floorSize.height/2+135-treeSize.height,
child: Image.asset("assets/youzi$treeType.png",width: treeSize.width,height: treeSize.height)
));
}
ТАДА!Мы успешно посадили дерево!
Как решить движение масштабирования?
Во Flutter очень просто, используйтеInteractiveViewer! !
InteractiveViewer(
boundaryMargin: const EdgeInsets.all(double.infinity),
minScale: 0.2,
maxScale: 2,
child: getMapWidget() //这个函数返回的就是前面构建的地块Stack
)
постскриптум
Это только завершает простейший макет игры на ферме, но я считаю, что все поняли метод реализации благодаря этой статье, и его можно легко выполнить с любым фреймворком!
Но чтобы завершить игру «Счастливая ферма», нужно разобраться с множеством состояний. Если позже у меня будет время, я воспользуюсь облачной разработкой для полной реализации "
开心农场", заинтересованные друзья, обратите внимание на мои самородки и гитхаб~
Репозиторий на гитхабе
GitHub.com/Как насчет Эчжоу/Приложение…
Вспомогательный видеоурок:воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо по
пожалуйста следуйте за мной
я大帅,Один老программа猿!