Дарт, почему не появится моя фигура?

Question

Я пытаюсь сделать так, чтобы в каждой позиции моя мышь сгенерировала черный круг, но я не могу показать его, я знаю, что получаю информацию, но я понятия не имею, почему мои вещи не ' не появляется? Есть ли какой-то метод перекраски, который мне не хватает? Я пробовал довольно много вещей, которые я не очень понимаю, как 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());
  });

}

Answer 1

Скорее всего, у вас возникла проблема с масштабированием из-за несоответствия между фактическим размером рисунка холста и его размером в качестве элемента 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 устраняет проблему, когда кнопка мыши отпускается за пределами холста.