如何在新位置旋转dojox gfx形状?

时间:2012-09-28 20:58:02

标签: javascript svg dojo gfx

如何在新位置旋转dojox gfx?

形状是可移动的,必须在新位置旋转和缩放。为了演示,我使用了Butterly Demo from dojox gfx。请参阅this example at jsfiddle for the moveable butterfly

如何在新位置和新中心旋转和缩放形状?

提前致谢,

mbecker

1 个答案:

答案 0 :(得分:2)

我分叉你的jsFiddle(http://jsfiddle.net/phusick/ta65D/)并添加了两个dijit/form/NumberSpinner(translateX& translateY)实例,以便通过修改后的updateMatrix函数移动蝴蝶:

var updateMatrix = function() {
    var translateX = xSpinner.get("value");
    var translateY = ySpinner.get("value");

    var centerX = 210 + translateX;
    var centerY = 170 + translateY;

    if(g) {
        g.setTransform([
            m.rotategAt(rotation, centerX, centerY), 
            m.scaleAt(scaling, centerX, centerY), 
            m.translate(translateX, translateY)
        ]);
    }
};

编辑:要添加鼠标DnD支持,请将以下代码添加到上述代码中:

var moveable = new Moveable(g);   // require("dojox/gfx/Moveable")
moveable.onMoved = function(mover, shift) {
    xSpinner.set("value", xSpinner.get("value") + shift.dx);
    ySpinner.set("value", ySpinner.get("value") + shift.dy);
}

当然,你不必使用NumberSpinner,但是因为我把它放在那里之前它给你一个很好的反馈,在幕后发生了什么。在jsFiddle上看到它:http://jsfiddle.net/phusick/ta65D/