颤振变换 |原点与对齐答案

【问题标题】：Flutter Transform | origin vs alignment颤振变换 |原点与对齐
【发布时间】：2021-08-20 21:01:52
【问题描述】：

我需要知道 Transform 小部件的 origin 和 alignment 属性之间的区别。如果我们同时设置原点和对齐会发生什么？从文档中，我理解的是既和设置原点。

起源

要在其中应用矩阵的坐标系的原点（相对于此渲染对象的左上角）。

对齐

原点的对齐方式，相对于框的大小。这相当于根据框的大小设置原点。如果与 [origin] 同时指定，则两者都适用。

【问题讨论】：

如果您想将变换应用于小部件的中心，则对齐很有用，而如果您知道确切的坐标，则原点很有用
我真正需要的是，我正在创建一个带有变换小部件的小部件调整大小功能。所以每条边的中间有4个锚点。如果我单击并拖动顶部锚点，它应该相对于底部锚点进行缩放。因此，我根据锚点用户单击动态更改变换小部件的原点。即使小部件缩放，它的大小值也不会增加。
类似stackoverflow.com/a/64427558/2252830?
@pskink 完全正确。让我试试看。

标签： flutter dart flutter-layout

【解决方案1】：

Origin 用于固定 X 和 Y 位置。

Center(
  child: Container(
    color: Colors.black,
    child: Transform(
      origin: Offset(20,40) ,
      //alignment: Alignment.center,
      transform: Matrix4.skewY(0.3)..rotateZ(24 / 12.0),
      child: Container(
        padding: const EdgeInsets.all(8.0),
        color: const Color(0xFFE8581C),
        child: const Text('hello'),
      ),
    ),
  ),
),

而Alignment 显示特定位置，如center、left、centerRight 等。

【讨论】：