Question

var m = ele.matrix;

m.translate(10,10) //此行更新矩阵的'e'和'f'。只有当我刷新firebug中的值时，我才能看到更新的值

该元素未被翻译。当我更改元素的矩阵时，请让我知道如何使元素服从变换。

完整代码：

<html>
<head>
    <script src="raphael-min.js"></script>
    <style>
        #canvas_container {  
                width: 500px;  
                border: 1px solid #aaa;  
            }  
    </style>
</head>
<body><div id="canvas_container"></div></body>
<script>
window.onload = function() {    
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);     
    text = paper.text(150,150,"Some Text");     
    text.transform("m1,0,0,1,5,0")  
} 
</script>
</html>

感谢

Answer 1

我认为转换正在发挥作用，但它正在立即执行，因此您无法看到它的移动。尝试在超时后进行转换以查看它：

setTimeout(function() {text.transform("m1,0,0,1,5,0")}, 2000);

编辑：好的，我多看了一下，发现了一些可能有用的东西。您可以按照fiddle进行操作。

使用元素的matrix属性并没有真正记录（我想知道为什么Matrix会被记录，因为它似乎是在内部使用，但并不是真正意图供Raphael用户使用），而且只是通过获取矩阵的变换字符串并使用element.transform()应用它，我可以想出将它应用于元素的方法。其中一个问题是Matrix.toTransformString()似乎有一个错误，如果x或y翻译为0，翻译就会完全丢失（我只是向Dmitry报告）。我能够通过传递{isSimple: false}让它返回一个矩阵字符串，它有点工作。

然而，值得注意的是，使用这种方法，所有旋转和缩放似乎都与原点相关，这有点麻烦（除非你比我更精通矩阵变换，这不会很难）。无论如何，小提琴在几个元素上运行了一系列变换组合。它有点草率，但我认为它可能会给你一些关于如何进行矩阵变换的想法（或者如果你最好直接使用元素转换函数[如translate，scale和rotate]）。

转换不更新元素

1 个答案: