Làm cách nào để xoay tiện ích Vùng chứa trong 2D xung quanh điểm neo được chỉ định?

Question

Tôi muốn thực hiện vòng xoay 2D rất đơn giản của tiện ích Con chứa (có chứa một số tiện ích con khác.) Tiện ích con này sẽ được xoay quanh một điểm cố định ở trung tâm, không bị biến dạng.

tôi đã cố gắng sử dụng transform tài sản với Matrix4.rotationZ, mà phần nào hoạt động - nhưng điểm neo là trong trên bên trái góc, không phải trong trung tâm. Có cách nào dễ dàng để xác định điểm neo đó không?

Hơn nữa, có cách nào dễ dàng hơn để xoay 2D tiện ích này không yêu cầu Matrix4?

var container = new Container (
    child: new Stack (
    children: [ 
     new Image.asset (// background photo 
     "assets/texture.jpg", 
     fit: ImageFit.cover, 
    ), 
     new Center (
     child: new Container (
      child: new Text (
      "Lorem ipsum", 
      style: new TextStyle(
       color: Colors.white, 
       fontSize: 42.0, 
       fontWeight: FontWeight.w900 
      ) 
     ), 
      decoration: new BoxDecoration (
      backgroundColor: Colors.black, 
     ), 
      padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0), 
      transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg 
     ), 
    ), 
    ], 
), 
    width: 400.0, 
    height: 200.0, 
); 

Answer 1

Áp dụng một dịch (đến và đi từ điểm tựa) trước và sau khi quay.

Bạn có thể tạo cho mình một tiện ích nhỏ thực hiện việc này và do đó giải quyết vấn đề khác của bạn cùng một lúc (ẩn Matrix4).

Answer 2

Theo lời khuyên của Ian, tôi đã thử một cách sau. Dường như nó hoạt động, ít nhất là trong thử nghiệm giới hạn của tôi.

Lưu ý rằng tôi đã mã hóa cứng chiều rộng/chiều cao của Vùng chứa đích. Vì vậy, các thuộc tính chính cần tập trung vào cho Vùng chứa đó là chiều rộng, chiều cao, và chuyển đổi (Điều đó nói rằng, tôi muốn một cách sạch hơn sử dụng các thuộc tính chiều rộng/chiều cao vốn có của Container.)

CHỈNH SỬA: Transform widget. Sử dụng alignment cho phép người ta điều chỉnh nguồn gốc biến đổi theo các cụm từ tương đối, tức là ở trung tâm, trên cùng bên trái, v.v.

var container = new Container (
    child: new Stack (
    children: [ 
     new Image.asset (// background photo 
     "assets/texture.jpg", 
     fit: ImageFit.cover, 
    ), 
     new Center (
     child: new Transform (
      child: new Container (
      child: new Text (
       "Lorem ipsum", 
       style: new TextStyle(
       color: Colors.white, 
       fontSize: 42.0, 
       fontWeight: FontWeight.w900, 
      ) 
      ), 
      decoration: new BoxDecoration (
       backgroundColor: Colors.black, 
      ), 
      padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),    
     ), 
      alignment: FractionalOffset.center, // set transform origin 
      transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg 
     ), 
    ), 
    ], 
), 
    width: 400.0, 
    height: 200.0, 
);