Memo : Flutter x Dart [2015-2016]
  • Introduction
  • hello
    • helloworld
    • build flutter
    • build as standalone android app(old)
      • draw text
      • draw image
      • set icon
    • build as standalone apk(now)
    • build as ios app
    • build as linux app
    • build as mac app
    • build mojo
    • build as chromeapp
  • rendering
    • draw_rect
    • anime_rect
    • anime_rect(use animation.dart)
    • draw_image
    • rotate_image
    • draw_image_from_assets
    • sound_test(rendering & service)
    • touch_test
    • multitouch_test
    • [@]demo::mini game(spacewar!)
    • draw_text
    • draw_path
    • draw_vertexs
    • draw_vertexs_with_image
    • [@]demo:3d anime
    • input text from ime(RenderObject)
  • widget
    • text
    • network image
    • assets image
    • raw image
    • container
    • row
    • col
    • flexible
    • navigator
    • stateful component
    • scaffold
    • scaffold x drawer
    • scrollable viewport
    • scrollable list
    • input text from ime(EditableText)
  • dart:io
    • HttpClient Post & Get
    • NetworkInterface
    • TCP Socket
    • UDP Socket
    • File Path(dart:io & service)
    • File Create & Permission
  • dart:ui
    • draw rect
    • pointer event
  • mojo for flutter
    • get and post request
    • sensor test
    • [@]demo:gravity sensor
  • 2d physics for scratch
    • collision without rotation
    • [@]democollision without friction
    • [b]
  • 2d physics for newton
  • mojo for native
    • build mojo
  • 48 hour trial
    • create iron heart
    • tiny tetris
Powered by GitBook
On this page

Was this helpful?

  1. dart:ui

draw rect

Previousdart:uiNextpointer event

Last updated 5 years ago

Was this helpful?

// flutter: ">=0.0.15"
// following code is checked in 2016/01/13
import 'dart:ui' as ui;
import 'dart:typed_data';
import 'package:vector_math/vector_math_64.dart';

// ex 3:4 game screen
double stageWidth = 800.0;
double stageHeight = 600.0;
ui.Rect stageSize = new ui.Rect.fromLTWH(0.0, 0.0, stageWidth, stageHeight);

ui.Scene createScene(ui.Picture picture) {
  double widthPaddingless  = ui.window.size.width-ui.window.padding.left-ui.window.padding.right;
  double heightPaddingless = ui.window.size.height-ui.window.padding.top-ui.window.padding.bottom;
  double rw = widthPaddingless/stageWidth;
  double rh = heightPaddingless/stageHeight;
  double stageRatio = (rw<rh?rw:rh);
  double t = ui.window.padding.top;
  double l = ui.window.padding.left + (widthPaddingless-stageWidth*stageRatio)/2.0;

  ui.Rect sceneBounds = new ui.Rect.fromLTWH(
    0.0, 0.0,
    ui.window.size.width * ui.window.devicePixelRatio,
    ui.window.size.height * ui.window.devicePixelRatio
  );

  Matrix4 mat = new Matrix4.identity();
  mat.translate(l*ui.window.devicePixelRatio, t*ui.window.devicePixelRatio);
  mat.scale(stageRatio*ui.window.devicePixelRatio, stageRatio*ui.window.devicePixelRatio, 1.0);

  ui.SceneBuilder sceneBuilder = new ui.SceneBuilder(sceneBounds);
  sceneBuilder.pushTransform(mat.storage);
  sceneBuilder.pushClipRect(stageSize);
  sceneBuilder.addPicture(ui.Offset.zero, picture, stageSize);
  sceneBuilder.pop();
  sceneBuilder.pop();
  return sceneBuilder.build();
}

void onPaint(Duration timeStamp) {
  print("---onPaint ${timeStamp}");
  //
  ui.PictureRecorder recorder = new ui.PictureRecorder();
  ui.Canvas canvas = new ui.Canvas(recorder, stageSize);

  //
  ui.Paint paint = new ui.Paint();
  paint.strokeWidth = 30.0;
  paint.style = ui.PaintingStyle.stroke;
  paint.color = new ui.Color.fromARGB(0xff, 0xff, 0xaa, 0x77);
  ui.Rect drawRectSize = new ui.Rect.fromLTWH(
    paint.strokeWidth, paint.strokeWidth,
    stageWidth-paint.strokeWidth*2,
    stageHeight-paint.strokeWidth*2);
  canvas.drawRect(drawRectSize, paint);
  ui.Picture picture = recorder.endRecording();

  ui.window.render(createScene(picture));
}

void main() {
  ui.window.onBeginFrame =  onPaint;
  ui.window.onMetricsChanged = (){
      ui.window.scheduleFrame();
  };
  ui.window.scheduleFrame();
}
https://github.com/kyorohiro/hello_skyengine/tree/master/dartui_draw