Question

以下代码尝试将图像从工具栏中选定的按钮绘制到鼠标位置的画布中。根据打印的坐标，正确计算位置，但图像放在错误的位置。代码：

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

Answer 1

问题是您将CSS样式width和height设置为除画布的实际宽度和高度之外的其他内容。有关详细信息，请参阅this answer。

如果你真的希望画布尺寸的规范来源在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]);

我希望有一种更优雅的方式来剥离'px'，但这是我想到的第一件事。

为什么图像被绘制在错误的位置？

1 个答案: