请问Transformable 和 matrix 如何使用？

[enjoyourlife]

大家好，请问我在微信小程序创建了一个ZRender对象：zr = zrhelper.createZrender('canvas-1', 'auto', 720); 然后又创建了一个Transformable对象： var tf = new zrender.Transformable({ position: [100, 100], rotation: 30 }); 请问我应该如何写代码，把tf应用到zr上，来实现整体的移动和旋转？

或者是我创建了一个matrix：var tranMatrix = [1, 0, 0, 1, 100, 100]; 请问我如何把这个matrix应用到zr上，实现整体移动？

谢谢大家的解答，刚入门，找了好久没有找到代码。

[stephenliu1944]

创建一个group, 把shape全部添加到这个group中, 操作这个group即可

[enjoyourlife]

我想实现的效果是，canvas的整体缩放或者移动，比如在canvas是点击一个A点，那么先把canvas的原点移动到A点，然后再以A点为原点，进行放大。 如果“把shape全部添加到这个group中, 操作这个group”，实现以上功能是不是不大方便。

[enjoyourlife]

我看了所有的issue和api文档，好像没有如何使用matrix的示例代码，不知道官方能否提供一下。 我能理解matrix的含义，只要告诉我调用哪个函数，使得matrix作用到当前zrender对象上就可以了。 十分感谢。

[Ovilia]

@stephenliu1944 的回答是对的，zrender 对底层操作做了封装，所以不能再用状态机式的思维使用，不然直接用 canvas 更合适。

[enjoyourlife]

@Ovilia @stephenliu1944 谢谢两位的回复，使用group很难实现，原点改变，同时又移动又缩放的情况啊。 我看了之前的issue，发现获取了可以获取cxt的方法： var cxt = zr.painter.getRenderedCanvas().getContext('2d');

但是我在用cxt调用类似的方法：cxt.scale(2, 3); 后，之前的画图并未改变，请问还需要调用哪个函数呢？谢谢。 以下是代码： pixelManager.drawPixelsZRender(zr);//在zr上画矩形 var cxt = zr.painter.getRenderedCanvas().getContext('2d');//获取cxt cxt.scale(3, 3);//缩放 zr.refresh();//但是矩形没有发生变化

[stephenliu1944]

你可以对这个group使用矩阵, Group继承自Element, Element继承自Transformable, 所以你可以在group上执行任何Transformable对象的方法和属性, 参考Transformable API. 如: group.attr('scale', [x, y]); group.attr('position', [x, y]);

[Ivorzk]

@stephenliu1944 的回答是对的，zrender 对底层操作做了封装，所以不能再用状态机式的思维使用，不然直接用 canvas 更合适。 为啥呢，这样做有什么好处么？怎么感觉思维很反常规啊，还有文档写的太模糊了，都不知道怎么用，可否带个示例，这些弄不好发到网上做啥，给别人用，那得把文档写好啊，不然闭门造车好了

[beetaa]

你可以对这个group使用矩阵, Group继承自Element, Element继承自Transformable, 所以你可以在group上执行任何Transformable对象的方法和属性, 参考Transformable API. 如: group.attr('scale', [x, y]); group.attr('position', [x, y]);

@enjoyourlife @stephenliu1944 正解。