javascript - How to distort the figure by Raphael's matrix transform?

Question

I want to learn the basic usage of matrix transform of Raphael. So I've write following code which will distort a simple rectangle :

var rect = paper.rect(50, 50, 150, 200);
rect.attr({"fill":"#0ff", "stroke":"#000", "stroke-width":2.0});

var mtx = Matrix.add(1, -0.5, 0, 1, 0, 0);
var mts = mtx.toTransformString();
rect.attr("transform", mts);

Rectangle is appeared but no change has happened on the figure.

What should I do ?

Answer 1

它比你想象的要简单...

var rect = paper.rect(50, 50, 150, 200);
rect.attr({"fill":"#0ff", "stroke":"#000", "stroke-width":2.0});

rect.transform(['m', 1, -0.5, 0, 1, 0, 0]);