我试图做到这一点,以便在我的鼠标到达的每个位置都会生成一个黑色圆圈,但我无法让它显示出来,我知道我正在接收输入,但我不知道为什么我的东西没有显示?我是否缺少某种重绘方法?我已经尝试了很多东西,但我不太明白 requestAnimation
在这里是如何工作的。
我做错了什么?
import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
CanvasElement canvas = document.querySelector('#myPaintCanvas');
CanvasRenderingContext2D context = canvas.getContext('2d');
//circle deminsions
var centerX;
var centerY;
var radius = 15;
var PI = 3.14;
void requestRedraw(){
window.requestAnimationFrame(scribble());
}
void scribble(pointX, pointY){
print("MouseX: " + pointX.toString() + " MouseY: " + pointY.toString());
context.arc(pointX, pointY, radius, 0, 2 * PI, false);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = '#003300';
context.stroke();
}
void main(){
canvas.onMouseDown.listen((onDown){
StreamSubscription mouseMoveStream = canvas.onMouseMove.listen((onData){
scribble(onData.client.x, onData.client.y);
});
//to end my stream when the mouse is up
canvas.onMouseUp.listen((onData) => mouseMoveStream.cancel());
});
}
最佳答案
您很可能会遇到缩放问题,因为 Canvas 实际绘图尺寸与其作为 DOM 元素的尺寸(canvas.width = 500;
和 canvas.style.width)不匹配=“500px”;
)
修复了缩放+一些额外的修复:
import 'dart:html';
import 'dart:async';
CanvasElement canvas = document.querySelector('#myPaintCanvas');
CanvasRenderingContext2D context;
//circle deminsions
var centerX;
var centerY;
var radius = 15;
var PI = 3.14;
void scribble(pointX, pointY) {
print("MouseX: " + pointX.toString() + " MouseY: " + pointY.toString());
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(pointX, pointY, radius, 0, 2 * PI, false);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = '#003300';
context.stroke();
context.closePath();
}
void main() {
canvas.width = 500;
canvas.style.width="500px";
canvas.height = 500;
canvas.style.height="500px";
context = canvas.getContext('2d');
canvas.onMouseDown.listen((onDown) {
StreamSubscription mouseMoveStream = canvas.onMouseMove.listen((onData) {
var rec = canvas.getBoundingClientRect();
scribble(onData.client.x- rec.left, onData.client.y - rec.top);
});
//to end my stream when the mouse is up
document.onMouseUp.listen((onData) => mouseMoveStream.cancel());
});
}
我添加了 context.clearRect
来明确圆圈的位置。需要 context.beginPath();
和 context.closePath();
来防止圆之间的桥梁。 document.onMouseUp
而不是 canvas.onMouseUp
修复了在 Canvas 外释放鼠标按钮时的问题。
关于html - 达特,为什么我的形状不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24318945/