标签: transform

使用 SVG，我尝试将其旋转 30 度，然后水平平移 100 度。问题是，当我旋转坐标系时，它会旋转，因此当我尝试平移时，我将沿着旋转的 x 平移对象- 轴现在与水平面成 30 度。

有什么办法可以让旋转后水平平移吗？

<g transform="rotate(30 50 50) translate(100 0)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

我想创建用于旋转和平移上、下、左、右的控制按钮。这些将创建一个字符串，该字符串将使用数据绑定到 svg 的转换属性，从而按顺序转换对象。但平移需要相对于视口，而不是对象的旋转方式。

我使用 vue.js 框架进行数据绑定。

我也不想使用css。

谢谢，

我想用左上角的字母（A，B，C，...）来标记子图，这些字母要么与 ylabels 对齐，要么与子图的实际角（而不是轴）对齐。

如果子图的宽度不同，我不能再使用轴变换坐标中带有偏移的文本，因为这会导致每个子图的距离不同。所以我通常使用偏移变换。但如果 ylabel 具有不同的宽度，这将不再起作用。我目前还关注每个图的偏移量，但这还不够好。

这是我到目前为止所拥有的：

import matplotlib.pyplot as plt
from matplotlib import transforms
import numpy as np

fig = plt.figure(figsize=(5, 2), constrained_layout=True)
gs = fig.add_gridspec(1, 3, width_ratios=[1, 2, 3])
axes = [fig.add_subplot(gs[i]) for i in range(3)]

ylabels = ["flat label", "bigger\nlabel", "even\nbigger\nlabel"]
labels = ["A", "B", "C"]

scaledtrans = transforms.ScaledTranslation(-0.4, 0, fig.dpi_scale_trans)

for ax, ylabel, label in zip(axes, ylabels, labels):
    ax.set_ylabel(ylabel)
    ax.text(0, 1, label, fontsize=12, fontweight="bold", va="bottom", ha="left",
           transform=ax.transAxes + scaledtrans)

如下图所示，标签与轴脊的距离相同，但我希望它们与 ylabel 的左边缘或子图的角对齐，在这种情况下，它们与 ylabel 水平重合。但没有 transSubplot，只有 transAxes …

我想更好地理解 ARKit 的 ARCamera 变换所在的相机坐标空间。在文档中，它说

\n

此变换为相机创建一个相对于设备方向恒定的局部坐标空间。在相机空间中，当设备处于UIDeviceOrientation.landscapeRightorientation \xe2\x80\x94 时， x 轴指向右侧，即 x 轴始终沿着设备的长轴指向，从前置摄像头朝向主页按钮。y 轴指向上方（相对于 UIDeviceOrientation.landscapeRight 方向），z 轴指向远离屏幕一侧的设备。

\n

接下来，UIDeviceOrientation.landscapeRight 文档说：

\n

设备处于横向模式，设备直立且主页按钮位于左侧。

\n

当我试图理解这一点时，似乎"the x-axis points to the right when the device is in UIDeviceOrientation.landscapeRight orientation"和之间存在冲突"that is, the x-axis always points along the long axis of the device, from the front-facing camera toward the Home button"。前者向右有+x，后者向左有+x。

这是我的想象"the x-axis points to the right when the device …

我正在尝试构建一个搜索栏，如果您将鼠标悬停在搜索图标上，它应该会展开。但直接对宽度进行动画处理并不高效，因此我决定使用变换，但它无法正确缩放搜索栏。这是屏幕截图。

使用正常宽度 图像时

使用变换 图像时

CSS代码：

.searchBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 8px;
}

.search-content {
  font-size: 10px;
}

.search-input {
  width: 0px;
  background-color: transparent;
  padding: 0.5rem;
  padding-right: 2rem;
  border-radius: 2rem;
  border: none;
  outline: none;
  transition: 0.2s;
}

.searchBox:hover > .search-input {
  /* width: 8rem; */
  transition: scaleX(8rem);
  padding: 0.5rem;
  padding-right: 2rem; 
  background-color: rgb(240, 245, 248);
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}

.searchSvg {
  position: absolute;
  right: 0.62rem;
  transition: 0.3s;
  display: …

我想创建一个旋转动画，其中包含一组按钮（排列成圆圈），这些按钮从单击的中心按钮旋转和延伸。

虽然动画和旋转工作良好，并且打开按钮和关闭按钮工作顺利并且尽管旋转但仍响应 onTap()，但外部按钮在“onTap”-GestureDetector 方面不起作用。

目标：我想让红色容器可点击（例如GestureDetector）。问题：红色容器对 onTap() 没有反应。

import "dart:developer" as dev;
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:sdg3/Widget/rotation_controller.dart';
import 'package:sdg3/Widget/rotation_menu_button.dart';
import 'package:vector_math/vector_math.dart' show radians, Vector3;

class RadialMenu extends StatefulWidget {
  final Widget open;
  final Widget? close;
  final int startAngle;
  final List<RotationMenuButton> rotationButtons;
  final RotationController? rotationController;

  const RadialMenu({
    Key? key,
    this.rotationController,
    required this.open,
    this.startAngle = 0,
    this.close,
    required this.rotationButtons,
  }) : super(key: key);

  @override
  createState() => _RadialMenuState();
}

class _RadialMenuState extends State<RadialMenu>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late double maxButtonRadius;

  @override …

transform: matrix()我需要在应用css 转换之前计算出元素的结束边界矩形。我不知道从哪里开始，也找不到任何解决这个问题的好文章。

因此，假设您拥有元素的原始位置，getBoundingClientRect()如果您拥有应该应用的矩阵，是否有可靠的方法来找到结束位置。

我已经构建了一个滚动控制器，我正在尝试在屏幕上映射元素进度，但我需要元素的开始和结束位置。因此，我需要应用 css 转换后元素的位置来确定元素何时离开屏幕。现在我只是应用矩阵然后getBoundingClientRect()再次运行。但这似乎有点老套。

因此，假设您有原始矩阵和结束矩阵。getBoundingClientRect()然后在元素上运行来找到它的位置。有没有数学方法来计算新的边界矩形？

因此，对于本示例，我们将仅使用 6 值矩阵。但如果将它应用到完整的 16 值矩阵也会很好：

const boundingRect = element.getBoundingClientRect();
const startingMatrix = [1, 0, 0, 1, 0, 0];
const endingMatrix = [2, 1, -1, 2, 200, 400];

// Now calculate the new bounding rect of element after ending matrix is applied.

我根据下面的评论推荐的这篇文章https://dev.opera.com/articles/understanding-the-css-transforms-matrix/尝试了以下操作。我显然缺少或不明白一些东西。这是我的尝试：

const boundingRect = element.getBoundingClientRect();
const startingMatrix = [1, 0, 0, 1, 0, 0];
const endingMatrix = [2, 1, -1, 2, 200, …