Почему TransformationMatrix, по-видимому, действует в stageXL иначе, чем в нативных манипуляциях с холстом в dart / javascript? - PullRequest
Новая
       41

Почему TransformationMatrix, по-видимому, действует в stageXL иначе, чем в нативных манипуляциях с холстом в dart / javascript?

0 голосов
/ 21 мая 2019

Я пытаюсь увеличить изображение на холсте с помощью StageXL. Как и карты Google один. Таким образом, указатель мыши должен оставаться на месте, а содержимое должно приближаться к этой точке.

Я нашел фрагмент кода, который прекрасно работает здесь, на stackoverflow и написан на JS. Увеличение точки (с использованием масштаба и перевода)

Итак, я переписал этот код с помощью dart / stagexl (и со спрайтом, потому что в конце дня мне придется увеличить спрайт), и результат выглядит совсем иначе с использованием transformationMatrix.

Кто-нибудь имеет представление о том, почему этот код действует так сильно отличается от кода, написанного на нативном js?

Большое спасибо заранее за ваши ответы! 

int width = 600;
int height = 200;
num zoomIntensity = 0.2;
num scale = 1;
num originx = 0;
num originy = 0;

html.CanvasElement canvas = html.querySelector('#stage');
Stage stage;
Sprite container = new Sprite();

init() {
  StageOptions options = new StageOptions()
    ..backgroundColor = Color.BlanchedAlmond
    ..renderEngine = RenderEngine.Canvas2D;
  stage = new Stage(canvas, width: 800, height: 600, options: options);
  var renderLoop = new RenderLoop();
  renderLoop.addStage(stage);
  stage.addChild(container);
}

draw() {
  GraphicsCommandRect rectCommand = new GraphicsCommandRect(50, 50, 100, 100);
  GraphicsCommandFillColor blueCommand =
      new GraphicsCommandFillColor(Color.CadetBlue);
  container.graphics.clear();
  container.graphics.beginPath();
  container.graphics.rect(originx, originy, 800 / scale, 600 / scale);
  container.graphics.fillColor(Color.OrangeRed);
  container.graphics.closePath();
  container.graphics.beginPath();
  container.graphics.addCommand(rectCommand);
  container.graphics.addCommand(blueCommand);
  container.graphics.closePath();
}

main() {
  init();
  draw();

  stage.onMouseWheel.listen((event) {
    print("x: ${event.localX} y: ${event.localY}");
    event.preventDefault();

    num mousex = event.localX;
    num mousey = event.localY;
    int wheel = event.deltaY < 0 ? 1 : -1;
    num zoom = exp(wheel * zoomIntensity);

    container.transformationMatrix.translate(originx, originy);

    originx -= mousex / (scale * zoom) - mousex / scale;
    originy -= mousey / (scale * zoom) - mousey / scale;

    container.transformationMatrix.scale(zoom, zoom);
    container.transformationMatrix.translate(-originx, -originy);

    scale *= zoom;

    draw();
  });
}
...