feat!: resize canvas on web

This commit is contained in:
Nick Fisher
2024-08-17 11:43:43 +08:00
parent 9e3311c6f9
commit b207a48175
2 changed files with 18 additions and 5 deletions

View File

@@ -83,9 +83,11 @@ class _ThermionWidgetState extends State<ThermionWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_texture?.usesBackingWindow == true) { if (_texture?.usesBackingWindow == true) {
return Stack(children: [ return ResizeObserver(
onResized: _resizeTexture,
child: Stack(children: [
Positioned.fill(child: CustomPaint(painter: TransparencyPainter())) Positioned.fill(child: CustomPaint(painter: TransparencyPainter()))
]); ]));
} }
if (_texture == null || _resizing) { if (_texture == null || _resizing) {

View File

@@ -4,8 +4,12 @@ import 'package:thermion_flutter_platform_interface/thermion_flutter_platform_in
import 'package:thermion_flutter_platform_interface/thermion_flutter_texture.dart'; import 'package:thermion_flutter_platform_interface/thermion_flutter_texture.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:web/web.dart'; import 'package:web/web.dart';
import 'dart:js_interop';
import 'dart:js_interop_unsafe';
class ThermionFlutterWebPlugin extends ThermionFlutterPlatform { class ThermionFlutterWebPlugin extends ThermionFlutterPlatform {
ThermionViewerWasm? _viewer;
static void registerWith(Registrar registrar) { static void registerWith(Registrar registrar) {
ThermionFlutterPlatform.instance = ThermionFlutterWebPlugin(); ThermionFlutterPlatform.instance = ThermionFlutterWebPlugin();
} }
@@ -24,6 +28,13 @@ class ThermionFlutterWebPlugin extends ThermionFlutterPlatform {
@override @override
Future<ThermionFlutterTexture?> resizeTexture(ThermionFlutterTexture texture, Future<ThermionFlutterTexture?> resizeTexture(ThermionFlutterTexture texture,
int width, int height, int offsetLeft, int offsetRight) async { int width, int height, int offsetLeft, int offsetRight) async {
final canvas = document.getElementById("canvas") as HTMLCanvasElement;
canvas.width = width;
canvas.height = height;
_viewer!.updateViewportAndCameraProjection(width, height, 1.0);
print("Resized canvas to ${canvas.width}x${canvas.height}");
return ThermionFlutterTexture(null, null, 0, 0, null); return ThermionFlutterTexture(null, null, 0, 0, null);
} }
@@ -35,8 +46,8 @@ class ThermionFlutterWebPlugin extends ThermionFlutterPlatform {
var width = window.innerWidth; var width = window.innerWidth;
var height = window.innerHeight; var height = window.innerHeight;
var viewer = ThermionViewerWasm(assetPathPrefix: "/assets/"); _viewer = ThermionViewerWasm(assetPathPrefix: "/assets/");
await viewer.initialize(width, height, uberArchivePath: uberArchivePath); await _viewer!.initialize(width, height, uberArchivePath: uberArchivePath);
return viewer; return _viewer!;
} }
} }