在工具栏中选择鼠标后，以下代码应在鼠标在 Canvas 中移动时绘制图像:
import 'dart:html';
class Test {
ImageElement toolbar_selected_element = new ImageElement();
CanvasElement canvas;
var loaded_image_toolbar = false;
var mouseX = null, mouseY = null;
void main() {
canvas = query("#canvas");
canvas.onMouseMove.listen(canvas_OnMouseMove);
query(".toolbuton").onDragStart.listen(toolbar_button_OnClick);
}
void toolbar_button_OnClick(MouseEvent event) {
toolbar_selected_element.onLoad.listen(tool_button_image_OnLoad);
toolbar_selected_element.src = event.target.src;
}
void tool_button_image_OnLoad(event) {
loaded_image_toolbar = true;
window.requestAnimationFrame(draw);
}
void canvas_OnMouseMove(MouseEvent event) {
mouseX = event.clientX;
mouseY = event.clientY;
window.requestAnimationFrame(draw);
}
void draw(num _) {
if(loaded_image_toolbar && mouseX != null && mouseY != null) {
CanvasRenderingContext2D context = canvas.context2d;
context.drawImage(toolbar_selected_element, mouseX, mouseY);
}
}
}
void main() {
new Test().main();
}
调用了draw方法，但是图像未显示在 Canvas 中，缺少了什么？
最佳答案
我猜元素类实际上是toolbutton而不是toolbuton。
您的Dart代码对我来说(或多或少)适用于这样的HTML主体:
<body>
<canvas id="canvas"></canvas>
<img class="toolbuton" src="./test.png" />
</body>
当然，由于您想在不同的图像之间进行选择(我认为...)，因此更像是这样:
<body>
<canvas id="canvas"></canvas>
<img class="toolbutton" src="./test.png" />
<img class="toolbutton" src="./test2.png" />
</body>
然后在
Test.main()中，为每个工具按钮添加一个侦听器，而不仅仅是第一个:for (var toolbutton in queryAll('.toolbutton')) {
toolbutton.onClick.listen(toolbar_button_OnClick);
}
然后，我单击任一图像并将其绘制在 Canvas 中的光标位置，然后可以在它们之间来回切换，我相信这是您想要的。
关于dart - 我需要画什么图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16109199/