所以我知道这里有线程已经在这里,如that one。 我遵循了上述线程中提出的想法,并且工作正常。但是,我不明白它为什么起作用。HTML5帆布 - 放大点
下面是一个例子:
假设我在(100,100)为中心的方形,其宽度/高度为100。因此,它的左上角将在(50,50) 。
现在让我们说我想放大X2进入广场的中心,即放大(100,100)。所以,我会写下面的转换序列:
translate(100, 100);
scale(2, 2);
translate(-100, -100);
所以由于帆布适用于相反的顺序变换,我的转化平方米的左上角现在将在(0,0),它的高度/宽度将是200.
好吧,让我们说,现在我想放大X2到已经转换的正方形的右下角。所以直觉,我想执行下列转换序列:
translate(200, 200);
scale(2, 2);
translate(-200, -200);
但它不会工作,因为再次,在画布上以相反的顺序适用transfomations。也就是说,如果我总结一下我的两个转变序列,我会得到:
// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);
// Second Sequence
translate(200, 200);
scale(2, 2);
translate(-200, -200);
这意味着,第二顺序将在第一序列之前被应用到每个点(因为画布将应用从下到上转换),这是错误的。因此,上面的链接中的线程暗示如下:
由于序列2将首先应用,我应该将点(200,200)转换为其原始坐标,方法是将第一个序列的逆应用于它。也就是说,如果T1
是表示第一序列的矩阵,那么它看起来就像是:
// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);
// Second Sequence
var point = SVGPoint(200, 200);
var transformedPoint = point.matrixTransform(T1.inverse());
translate(-transformedPoint.x, -transformedPoint.y);
scale(2, 2);
translate(transformedPoint.x, transformedPoint.y);
但为什么它的工作原理?我真的不明白为什么它应该这样工作...任何人都可以详细说明它吗?
谢谢!
嗨!谢谢,这是一个很好的解释,它帮助我在应用于坐标系时查看转换的情况。但是在我接受这个答案之前,我仍然有一些东西缺失 - 我想请求你更深入地研究它 - 实际上,画布实现DO使用变换矩阵对逻辑点本身应用变换 - [请继续阅读下一条评论] – gipouf
这些转换以相反的顺序应用,为了给你一个错觉,即当以原始顺序查看转换时,它们将在坐标系上工作。我在这里吗?这是困扰我的主要问题。它们以相反的顺序被应用,因为画布的当前变换矩阵与用户应用的每个新变换后乘 - 因此在实践中,每个逻辑点将首先用用户应用的最后一个变换进行变换。 [原文如下] – gipouf
所以,我最初的问题是为什么这个演示的工作原理,如果我会试图解释它如何真正实现画布(以相反的顺序应用到每个点的转换) 。从这个观点来看,我很困惑。你明白我的意思吗? :) 或者我可能不知道画布是如何工作的,而我完全误导了自己。 **如果可能的话,我会很高兴与您聊天,所以我们不会进入漫长的评论。(我现在给你一个投票权)** – gipouf