Блог

Главная - Вопросы по программированию - Dart, почему не отображается моя фигура?

Dart, почему не отображается моя фигура?

#html #html5-canvas #dart #dart-editor #dartium

#HTML #html5-холст #dart #dart-редактор #dartium

Вопрос:

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

}

Комментарии:

1. Я только что добавил это к нему, и он выдает ошибку, в которой говорится, что scribble() не может быть void , но что еще вы могли бы сделать для такого типа функции?

2. requestAnimationFrame принимает RequestAnimationFrameCallback в качестве аргумента, который является функцией, от num до void typedef void RequestAnimationFrameCallback(num highResTime); , и вы пытаетесь передать результат scribble , в который void window.requestAnimationFrame(scribble()); вы можете его обернуть, (_)=>scribble(x,y) тогда он будет работать.

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