什么是“矩阵”？在拉斐尔 [英] What is a "matrix" for in raphael

问题描述

我试图更好地理解raphael.js，但我发现raphael.js文档有时会让人感到困惑，有时候会有点模糊。

I'm trying to get a better understanding of raphael.js in general, but i've found that the raphael.js documentation can be confusing at times and at other times a bit vague.

谁能向我解释什么是矩阵以及如何使用？

can anyone explain to me what matrix is for and how it is used?

推荐答案

几乎有在拉斐尔的任何地方都没有关于Matrix的好消息。然而，好消息是，它几乎与SVG中的Matrix转换以及CSS3完全相同。

There's almost no good, clear information on Matrix in Raphael anywhere. However, the good news is, it's almost exactly the same as Matrix transformations in SVG and also CSS3.

SVG中有一些矩阵变换的指南，但它们通常假设你已经理解了矩阵数学。如果你不这样做，那就不多了。

There are some guides to matrix transforms in SVG, but they usually assume you already understand matrix maths. Not much use if you don't.

然而， CSS3矩阵数学的一个很好的指南。它还附带一个 Matrix Construction Set （截至2013年2月，它在Chrome中不起作用）但适用于Firefox）。由于CSS3和Raphael矩阵变换背后的数学原理基本相同，你可以使用这个工具生成一组矩阵变换数，然后在Raphael中应用它们，它应该或多或少是相同的结果。

There is, however, one good guide on matrix maths in CSS3. It also comes with a Matrix Construction Set (as of Feb 2013, it doesn't work in Chrome but works in Firefox). Since the mathematical principles behind CSS3 and Raphael matrix transforms are essentially the same, you can use this tool to generate a set of matrix transform numbers then apply them in Raphael and it should be more or less the same result.

Matrix转换的全面概述：

Super-quick overview of what Matrix transforms are all about:

• 这是一组6个数字，用于计算转换完成后Raphael形状的边界框的每个角落的位置。在它们之间，这6个数字可以创建几乎任何比例，变换，旋转和剪切效果。


• 这是Raphael变换的幕后引擎：Raphael将变换转换为矩阵坐标。矩阵坐标可能会令人难以置信：除非你做的事情非常复杂，否则通常最好让它在幕后做事。


• 这是一个 XKCD笑话 ，说明矩阵变换背后的6个数字之间的数学关系。你会发现这很有趣，或者，它会让你相信最好让拉斐尔在引擎盖下做数学运算..
  。

• It's a set of 6 numbers that are used to calculate where each corner of the bounding box of a Raphael shape will be after the transformation has completed. Between them, these 6 numbers can create pretty much any scale, transform, rotate and shear effects.
• It's the behind-the-scenes engine for Raphael transforms: Raphael translates transforms into matrix co-ordinates. Matrix co-ordinates can get seriously mind-boggling: unless you're doing something extremely complex, it's usually best to just let it do it's thing under the hood.
• Here's an XKCD joke illustrating the mathematical relationship between the 6 numbers behind matrix transformations. You'll either find this funny, or, it'll convince you that it's best to just let Raphael do the maths itself under the hood.. .

• 要查看元素的当前矩阵状态：
  
  
  
  
  • 查看元素的矩阵对象直接： someElement.matrix 是一个对象，每个数字都用字母表示（例如 {a：1，b：0，c：0， d：1，e：0，f：0} 。直接设置这些不会改变对象（所以你不能做 someElement.matrix.b = 3; ）
  
  
  • 您可以使用 someElement.matrix.split将当前矩阵反向转换为包含转换属性的更易读的对象（ ）
  
  
  • 您还可以使用 someElement.matrix.toTransformString（）;
  

  • To look at an element's current matrix state:
    • To look at the element's matrix object directly: someElement.matrix is an object with each number given by letter (e.g. {a:1,b:0,c:0,d:1,e:0,f:0}. Setting these directly doesn't change the object (so you can't do someElement.matrix.b = 3;)
    • You can reverse-translate the current matrix into a more human-readable object containing transformation attributes using someElement.matrix.split()
    • You can also reverse-translate the matrix into a transform string with someElement.matrix.toTransformString();
    
    
    • 动画（使用数组）： someElement。 animate（{transform：['m'，0.5，-0.5,0.5,0.5，-0.5,0.5]}，1000）;
    
    
    • 即时（使用数组）： someElement.transform（['m'，0.5，-0.5,0.5,0.5，-0.5,0.5]）;
    
    
    • 动画（使用字符串）： someElement.animate（{transform：'m0.5 -0.5 0.5 0.5 -0.5 0.5'}，1000 ）;
    
    
    • 即时（使用字符串）： someElement.transform（'m0.5 -0.5 0.5 0.5 -0.5 0.5'）;
    
    
    • Animated (using array): someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
    • Instant (using array): someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
    • Animated (using string): someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
    • Instant (using string): someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');

    这篇关于什么是“矩阵”？在拉斐尔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！