Почему изображения рисуются не в том месте?

Question 1

Следующий код пытается нарисовать изображение из кнопки, выбранной на панели инструментов, на холст в позиции мыши. На основе напечатанных координат позиция рассчитывается правильно, однако изображения размещаются не в том месте. Код:

import 'dart:html';

class Test {
  ImageElement toolbar_selected_element = null;
  CanvasElement canvas;
  num mouseX = null, mouseY = null;

  void main() {
    canvas = query("#canvas");
    canvas.onClick.listen(canvas_OnClick);

    for (var toolbutton in queryAll('.toolbutton')) {
      toolbutton.onClick.listen((e) => toolbar_selected_element = query("#${e.target.id}"));
    }
  }

  void canvas_OnClick(MouseEvent event) {
    num x,y;
    var clientBoundingRect = canvas.getBoundingClientRect();
    mouseX = event.clientX - clientBoundingRect.left;
    mouseY = event.clientY - clientBoundingRect.top;
    window.requestAnimationFrame(draw);
  }

  void draw(num _) {
    CanvasRenderingContext2D context = canvas.context2d;
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(toolbar_selected_element!= null   && mouseX != null && mouseY != null) {
      print("$mouseX $mouseY");
      context.drawImage(toolbar_selected_element, mouseX, mouseY);
    }
  }
}

void main() {
  new Test().main();
}

Соответствующий html-файл можно найти по адресу: https://github.com/joaompinto/SVGDropper/blob/master/web /svgdropper.html

canvas dart

0

João Pinto 20 Апр 2013 в 01:07

Answer

Проблема в том, что вы устанавливаете стиль CSS width и height на что-то иное, чем фактическую ширину и высоту холста. Дополнительные сведения см. В этом ответе.

Если вы действительно хотите, чтобы канонический источник размеров холста находился в файле CSS, вы можете сделать что-то вроде этого:

void main() {
  canvas = query("#canvas");
  canvas.width = int.parse(canvas.getComputedStyle().width.split('px')[0]);
  canvas.height = int.parse(canvas.getComputedStyle().height.split('px')[0]);

Я надеюсь, что есть более элегантный способ убрать пиксель, но это первое, что пришло в голову.

1

Community 23 Май 2017 в 13:25

Question 2

Проблема в том, что вы устанавливаете стиль CSS width и height на что-то иное, чем фактическую ширину и высоту холста. Дополнительные сведения см. В этом ответе.

Если вы действительно хотите, чтобы канонический источник размеров холста находился в файле CSS, вы можете сделать что-то вроде этого:

void main() {
  canvas = query("#canvas");
  canvas.width = int.parse(canvas.getComputedStyle().width.split('px')[0]);
  canvas.height = int.parse(canvas.getComputedStyle().height.split('px')[0]);

Я надеюсь, что есть более элегантный способ убрать пиксель, но это первое, что пришло в голову.

1

Community 23 Май 2017 в 13:25

Почему изображения рисуются не в том месте?

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

canvas