问题标签 [rotatetransform]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
127 浏览

css - CSS3变换:如果父母有rotateY,则补偿孩子

先看看这里

当 div#container 旋转“x”度时,其中的<ul>and 和 元素也将旋转。但我想把<img>里面的每个<li>人都面平。如果我将 Y 全部旋转<li>“-x”度,它就行不通了。

有没有办法实现并使所有图像都面向您,同时沿着旋转的 div#container 定位?谢谢。

0 投票
1 回答
9002 浏览

wpf - WPF RotateTransform 数据触发器

是否可以使用 DataTrigger 在 WPF 中设置 RotateTransform 的角度?如果是这样,怎么做?

0 投票
2 回答
5519 浏览

wpf - RotateTransform 移动我的图像以及旋转它

好的,所以我有一个要围绕其左上角旋转的 Image 对象。我设置了一个 'X' 度的 RotateTransform。我的图像的边距设置为 (400,400,0,0)。这将它集中在画布上。

问题是当我应用不同的旋转角度时,图像会向右和向下移动。看帖子,我现在明白为什么会这样了。旋转变换计算出一个边界矩形,因此如果您旋转图像,它将有一个更大的边界矩形。边距应用于该边界矩形,这会导致实际图像随着角度的变化而向下和向右移动。

我想要的是图像的左上角在我的画布上始终精确地位于 (400,400) 处,并且图像围绕该点旋转。

我已经做了一些计算,可以通过移动左边距和上边距来让它表现出来,但只能使用以下等式在象限 1 和 4(0-90 度)和(270-360 度)中得到正确的计算:

对于 0-90 度:(只需更改边距的顶部部分。所需边距为 (400,400,0,0) Margin=(400-sin(angle)*Image.Height, 400, 0, 0);

对于 270-360 度:(只需更改页边距的 TOP 部分。所需页边距为 (400,400,0,0) Margin=(400, 400 + sin(angle)*Image.Width, 0, 0);

我已经尝试使用 RotateTransform.Transform(point) 和 Image.TranslatPoint(point) 但似乎无法让它们工作。

有人对我有什么建议吗?

我想如果我能在任何给定时间弄清楚图像的绑定矩形是什么,我就可以找出它的宽度/高度和我的图像宽度/高度之间的差异,并使用它来适当地移动边距。

我已经整理了一个小应用程序来显示我的问题。运行时,应用程序在我希望矩形左上角的位置显示一个红点。我将其简化为使用网格而不是图像。在屏幕的左上角,有一个文本框,您可以在其中指定旋转角度。文本框的右侧是两个重复按钮,如果您单击并按住它们,它们会增加和减少角度。请注意,当您更改角度时,网格的左上角如何远离红点。我希望它表现得就像你在左上角放了一个大头针,然后围绕大头针旋转它,而不从角落开始的点移动。

谢谢你的帮助。

这是示例应用程序的代码:

xml:

代码隐藏:

0 投票
1 回答
6371 浏览

opengl - 如何将矢量旋转到与 Z 轴对齐的位置?

我想将一个向量旋转到 Z 轴,它的方向是 Z 轴向后。所以如果向量是(1,1,1),我的结果应该是(0,0,-sqrt(3))。

我的想法是两个步骤。第一步是将我的向量绕 X 轴旋转到 XZ 平面。第二步是将XZ平面中的向量绕Y轴旋转到Z轴。

这是我的代码:

然而,结果 r[4] 不是我的期望。所以我认为我在上面的某些地方犯了一些错误。谁能给我一个提示?

0 投票
2 回答
5263 浏览

c# - 结合 RotateTransform 和 TranslateTransform

我正在使用 Thumb 类让用户在画布上拖放图像。当按下右键时,我希望用户能够旋转图像。旋转基于图像的中心。我有以下 XAML 代码

后面的代码

如果我只在屏幕周围拖放图像并少量旋转图像(在任何方向上看起来都可以 50 度),它就可以工作。然而,操作它不止于此,图像开始在屏幕上不可预测地移动。

我尝试将转换移动到不同的控件,以免混淆它们但没有收到可接受的结果。

我怎样才能让我的代码表现得像我想要的那样?

更新:这让我发疯了。我已更改代码和 XAML 以改用 MatrixTransformation

在我看来,这应该可行:首先,旋转图形而不是将其移动到偏移处。它不像我期望的那样工作。它旋转图像,但如果我继续移动鼠标,它会以螺旋方式奇怪地向外移动。无论我做什么,以什么顺序执行我的转换,它都不会起作用。

0 投票
1 回答
930 浏览

kinect - 使用 Kinect 进行图像处理

我正在尝试创建一个放大和缩小图像并通过 Kinect 旋转它的应用程序。到目前为止,它适用于任何一种情况。我想要的是,如果我旋转了图像,那么在我缩放时会保存该新值,因此我会放大已旋转 X 度的图像。我现在的方式,如果我先旋转然后尝试缩放,图像会回到初始阶段。

有什么建议么?

谢谢!

0 投票
6 回答
11101 浏览

xcode - 进度视图xcode的高度

有没有办法改变 Xcode 中进度视图栏的高度?

我正在使用 Xcode 4.3,需要一个垂直进度条。我旋转了条,但现在无法更改高度并且显示为圆形。

旋转进度条的更有效方法也会有所帮助。

谢谢!

0 投票
1 回答
1045 浏览

css - 使用 CSS3 转换打开一个 DIV

我有一个菜单,它必须出现在旋转 -90 度的一侧,如下图所示。

在此处输入图像描述

注意:DIV 具有动态宽度,因此我们不能旋转它,然后使用top:-XX.

我尝试了很多使用 CSS3 转换和转换原点,但没有任何组合可以让我到达那里。

我在这里创建了一个小提琴(http://jsfiddle.net/P2UQy/8/),它随机创建了 div 的内容(动态宽度)。此小提琴还包括使用 CSS3 转换进行旋转的失败尝试。

任何人都可以让它像上图所示的那样工作吗?如果需要,请随意添加更多容器/包装器。

0 投票
3 回答
6152 浏览

javascript - 如何在不使用 css 过渡的情况下将 jQuery animate 与 css3 属性结合起来?

在这个例子中;我正在尝试使用 css3 旋转属性创建一个 jQuery 动画。我可以用 css3transition和 jQuery管理这个动画,css()但我想用 jQueryanimate()来根据我的 jQuery variatons 旋转 deg 值。

jQuery 1.8.0 是否可以使用带有 css3 属性值的动画?

这是要检查的jsFiddle。

jQuery:

html:

编辑:移除了供应商前缀,例如-webkit-. 感谢凯文 B。

0 投票
1 回答
660 浏览

windows-phone-7 - 在 WP7 上使用 WriteableBitmap 和 RotateTransform 渲染文本块

似乎在适用于 Windows Phone 的 Silverlight 的 WriteableBitmap 中有一个非常烦人的错误。我有以下代码和 xaml:

这是xaml:

当您单击底部按钮时,顶部按钮将使用复合变换与可写位图一起呈现。每次渲染后,顶部按钮的结果图像都比前一个大。此外,可写位图的 PixelWith 和 PixelHeight 属性值与 Image 对象的 RenderSize 大不相同。有谁知道发生了什么?