如何围绕指定的锚点旋转2D容器小部件？ [英] How can I rotate a Container widget in 2D around a specified anchor point?

问题描述

我想对Container窗口小部件（包含少数其他窗口小部件）执行非常简单的2D旋转。此窗口小部件将围绕中心的单个固定点旋转，而不会变形。

I'd like to perform a very simple 2D rotation of a Container widget (that contains a handful of other widgets.) This widget would be rotated around a single fixed point in the center, with no deformations.

我尝试将 transform 属性与 Matrix4.rotationZ ，虽然有些有用，但是锚点位于左上角角，而不是中心。有一种简单的方法可以指定该锚点吗？

I tried using the transform property with Matrix4.rotationZ, which somewhat works – but the anchor point is in the top-left corner, not in the center. Is there an easy way to specify that anchor point?

此外，是否有一种更简单的方法来二维旋转不需要Matrix4的此小部件？

Furthermore, is there an easier way to 2D-rotate this widget that doesn't require 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,
);

推荐答案

在之前（与支点之间）应用翻译

Apply a translation (to and from the fulcrum) before and after the rotation.

您可以创建一个可以完成此操作的小部件，从而同时解决其他问题（隐藏Matrix4）。

You can create yourself a little widget that does this, and thus solve your other problem at the same time (hiding the Matrix4).

这篇关于如何围绕指定的锚点旋转2D容器小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！