[英]How to rotate dojox gfx shape at new position?
How to rotate a dojox gfx at a new position? 如何在新位置旋转dojox gfx?
The shape is moveable and has to be rotated and scaled at the new position. 形状是可移动的,必须在新位置旋转和缩放。 For demonstration i have used the Butterly Demo from dojox gfx .
为了演示,我使用了dojox gfx的Butterly Demo 。 See this example at jsfiddle for the moveable butterfly .
在jsfiddle看到这个可移动蝴蝶的例子 。
How is it possible to rotate and scale the shape at the new position and the new center? 如何在新位置和新中心旋转和缩放形状?
Thanks in advance, 提前致谢,
mbecker mbecker
I forked your jsFiddle ( http://jsfiddle.net/phusick/ta65D/ ) and added two instances of dijit/form/NumberSpinner
(translateX & translateY) to move the butterfly thanks to modified updateMatrix
function: 我分叉你的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)
]);
}
};
EDIT: To add mouse DnD support add the following code to the aforementioned: 编辑:要添加鼠标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);
}
Of course, you do not have to use NumberSpinner
, but since I put it there before it gives you a nice feedback what is going on behind the scenes. 当然,你不必使用
NumberSpinner
,但是因为我把它放在那里之前它给你一个很好的反馈,在幕后发生了什么。 See it at jsFiddle: http://jsfiddle.net/phusick/ta65D/ . 在jsFiddle上看到它: http : //jsfiddle.net/phusick/ta65D/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.