时间戳

首页 > 解决方案 > 有没有更好的方法在 Dart 中编写这种数据结构？

dictionary - 有没有更好的方法在 Dart 中编写这种数据结构？

问题描述

Dart 中的 Map 是一个哈希表，对吗？

Map starsData = {
        'stars':{   
            'star1': {'x': 0, 'y': 10},
            'star2': {'x': 0, 'y': 10}
        }
};

下面这个对象在 JavaScript 中可以作为哈希表访问，更快！！我只想在 Dart 中做一些事情，但我不确定最好的方法是否是使用 Map。

const starsData = {
    stars:{
       'star1': {'x': 0, 'y': 10},
       'star2': {'x': 0, 'y': 10}
    }
};

标签： dictionarydartstructure

解决方案

我已经在 Dart中重写了您的 JavaScript 实现（基于您链接的项目：https ://github.com/ToniCalfim/fallingstars/blob/master/index.js）：

也可以通过以下方式进行测试： https ://dartpad.dev/900989f4e35e5a61200e4ad04ecd399a

import 'dart:html';
import 'dart:math' as math;

const starsDiameter = 1.25;

const colorPallete = [
  'white',
  'yellow',
  'blue',
  'red',
  'orange',
  'turquoise',
  'purple',
  'green',
  'lightblue',
  'lightyellow',
  'lightgreen',
  'darkred',
  'darkblue',
  'darkorange',
  'darkturquoise',
  'darkgreen'
];

final math.Random _rnd = math.Random();
int getRandomNumber(int min, int max) => min + _rnd.nextInt(max - min);

class Star {
  int x, y;

  int positionX = getRandomNumber(2, 650);
  int positionY = getRandomNumber(3, 125);
  double diameter = starsDiameter;

  int pulsing = 0;
  int blinking = 0;

  int timeToFall = getRandomNumber(0, 7500);
  int velocityToFall = getRandomNumber(1, 5);
  int directionToFall = getRandomNumber(-1, 1);

  String color = colorPallete[getRandomNumber(0, colorPallete.length)];

  Star() {
    x = positionX;
    y = positionY;
  }
}

final List<Star> stars = List.generate(175, (_) => Star());

void update() {
  for (final currentStar in stars) {
    final currentTimeToFall = currentStar.timeToFall;

    if (currentTimeToFall != 0) {
      currentStar.timeToFall = currentTimeToFall - 1;
    } else {
      final currentVelocityToFall = currentStar.velocityToFall;
      final currentAngleToFall = currentStar.directionToFall;

      final currentPositionX = currentStar.x;
      final currentPositionY = currentStar.y;

      currentStar.x = currentPositionX + 1 * currentAngleToFall;
      currentStar.y = currentPositionY + currentVelocityToFall;
    }
  }
}

final CanvasElement canvas = querySelector('#canvas') as CanvasElement;
final CanvasRenderingContext2D context2D = canvas.context2D;

void drawStars() {
  context2D.clearRect(
      0, 0, context2D.canvas.width, context2D.canvas.height); // Clear canvas

  for (final currentStar in stars) {
    context2D.beginPath();
    context2D.fillStyle = currentStar.color;
    context2D.arc(currentStar.x, currentStar.y, starsDiameter, 0, 2 * math.pi);
    context2D.fill();
    context2D.closePath();
  }
}

void animateLoop([num highResTime]) {
  update();
  drawStars();
  window.requestAnimationFrame(animateLoop);
}

void main() {
  animateLoop();
}

通过查看您的代码，我看不出为什么要将星星保存在 Map 或其他与哈希表相关的结构中。您以两种方式使用星星：绘制和更新。在这两种情况下，您都只是遍历所有星星，这可以通过使用一个简单的列表并遍历所有元素来完成。

我应该补充一点，我不是前端程序员，我无法真正判断您绘制 2D 画布的方式是否是最有效的方式。我转换后的代码只是试图展示如何在 Dart 中构造数据。

推荐阅读