[英]Kinetic.js: Rotating image on touch
我有這個小提琴:
圖像旋轉不正確。 我使用的代碼是:
var stage = new Kinetic.Stage({
container: 'd',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
var isDragging = false;
var refRotation = null;
var rect = new Kinetic.Rect({
x: 150,
y: 150,
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50, 50],
dragOnTop: true,
draggable: true,
dragBoundFunc: function (pos) {
var xd = 150 - pos.x ;
var yd = 150 - pos.y ;
var theta = Math.atan2(yd, xd);
var deg = theta * 180 / Math.PI;
if (!isDragging) {
isDragging = true;
refRotation = deg;
} else {
var rotate = deg - refRotation;
rect.setRotationDeg(deg);
}
return {
x: this.getAbsolutePosition().x,
y: this.getAbsolutePosition().y
}
}
});
layer.add(RECT); stage.add(層);
誰知道我的數學有什么問題???
新的feddle與我想要的: http : //jsfiddle.net/zk9cn/
不知道Math.atan2,但似乎x和y的計算對我來說不對。 我會從中心扣除位置,而不是從位置中心。 http://jsfiddle.net/bighostkim/qZDcg/
var x = 150 - pos.x;
var y = 150 - pos.y;
var radian = Math.PI + Math.atan(y/x);
this.setRotation(radian);
另外,我也看到你的變量沒有被使用; isDragging,refRotate和rotate。
-----編輯----
如果要通過拾取角來旋轉矩形,可以使用以下代碼。 當你拿起角落時,由中心位置計算的度數已經是45.這就是你不能正確拿起角落的原因。 通過調整45使它看起來是正確的,但是當你拿起直線時,它會再次出錯。 看來你的要求有缺陷,除非是有意的。 http://jsfiddle.net/bighostkim/7Q5Hd/
var pos = stage.getMousePosition();
var xd = 150 - pos.x ;
var yd = 150 - pos.y ;
var theta = Math.atan2(yd, xd);
var degree = theta / (Math.PI / 180) - 45;
this.setRotationDeg(degree);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.