深入skew()函数 [英] skew() function in depth

问题描述

我真的需要了解skew(xdeg)函数的工作原理，所有研究似乎都无法解释x角如何影响其他点并使它失真，我需要知道是否存在任何数学公式或一种解决方法能够期望使用特定学位的结果.

I really need to understand how skew(xdeg) function works all research does not seem to explain how the x angle affecting the other points and distorts it like that, I need to know if there any mathematical formula it or a way to be able to expect the result of using a specific degree.

ps.我已经读过许多文档，其中最好的一个是 DevDocs ，其中说

ps. I already read tons of docs which the best one of them was the DevDocs which say

此变换是使变形的剪切映射(对流) 元素内的每个点在水平方向上以一定角度 垂直方向.每个点的坐标都用 值与指定角度成比例，并且与 起源;因此，离原点越远，意愿越强 是它的附加值.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

但是对于给定角度将如何影响元素中的那些点，没有进一步的解释.

but there is no further explanation for how the given angle will affect those points in an element.

在SVG书中，它通过说将水平或垂直线按特定值推动来解释偏斜，但是我不知道如何将deg值转换为偏移量

In SVG book it explains skew by saying it pushes a horizontal or a vertical line by specific value but I don't get how deg value is translated to offset one

推荐答案

数学在<angle>上应用的操作就是tan(<angle>).然后将其插入到转换矩阵中.

The mathematical operation that is applied on the <angle> is simply tan(<angle>). It is then inserted in the transformation Matrix.

好吧，关于skew并没有深入，也不是为什么使用角度而不是数值因素才有意义.因此，让我们以下面的ASCII示例为例，该示例显示仅x的偏斜.

Ok, that doesn't really goes in depth about skew, nor why it makes sense to use angle rather than a numeric factor. So let's take the following ASCII example showing an x only skew.

   skewX(0)            skewX(45deg)
_|         |_         _|         |_ => original box markers
  a o o o o         a o o o o    
  b o o o o           b o o o o
  c o x o o             c o x o o   <-- this line didn't move
  d o o o o               d o o o o
  e o o o z                 e o o o z
 |         |           |         |

因此，如果我们应用tan(45deg)，它将使我们的skewX因子为1.
这意味着所有水平线都将偏移距转换原点的距离的1倍.

So if we apply the tan(45deg) it gives us a skewX factor of 1.
This means that all the horizontal lines will get displaced by 1 * their distance to the transformation origin.

在上面的示例中，转换原点是5 * 5 图像的中心(x).
因此，第一条像素线(a o o o o)与原点之间的距离为负两个像素，它将在左侧平移2px.
最后一行(e o o o z)位于原点的+ 2px处，它将在右边翻译2px.
此变换不会影响原点上的中间线(c o x o o).

In above example the transformation origin is the center (x) of the 5*5 image.
So the first pixel line (a o o o o) being at a distance of minus two pixels from the origin, it will get translated by 2px on the left.
The last line (e o o o z) being at +2px from the origin, it will get translated by 2px on the right.
The middle line (c o x o o) being on the origin will not be affected by this transform.

好的，但这仍然不能解释为什么要麻烦角度而不是因素...

Alright, but that still doesn't explain why bother with angles rather than a factor...

角度表示法也很有意义，因为当我们将每列的中心点作为锚点旋转45度时，我们也可以解释这个例子.

Well the angle notation makes sense too, since we could also explain our example as we rotated every column by 45deg using their center point as anchor.

即使只是我的推测，角度也具有允许skewN(90deg)状态(无法用数字因子表示)的附加好处.

And even if it is just speculations from my part, angles have the added benefit to allow a skewN(90deg) state which couldn't be represented by a numeric factor.

这篇关于深入skew()函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！