设置旋转中心 [钛]

Question

我有一些旋转图像的代码。但是，旋转中心不等于要旋转的图像的中心。

我已经设置了图像的中心，但我不知道如何设置旋转中心。

以下是代码：

 // image code
var image = Titanium.UI.createImageView({
    backgroundImage:'test.png',
    width: 650,
    height: 650,
    center:{x:CenterX, y:CenterY},
    align:'center'
});
//rotation code
image.addEventListener('touchstart', function(e){
    var conv = e.source.convertPointToView({x: e.x, y:e.y}, win);

    var newAngle = Math.atan2(conv.y - 500, 380 - conv.x)* -(180 / Math.PI);  
    diff = (newAngle - old);

});

image.addEventListener('touchmove', function(e){

      var conv = e.source.convertPointToView({x: e.x, y:e.y}, win);

      var newAngle = Math.atan2(conv.y - 500, 380 - conv.x)* -(180 / Math.PI);
      current = (newAngle-diff); 
      var t = Ti.UI.create2DMatrix().rotate(current);
      wheel.transform = t;

});

Answer 1

您必须设置动画/视图锚点，在 iOS 上您必须设置 Ti.UI.View's anchorPoint，在 Android 上您必须设置 Ti.UI.Animation's anchorPoint 或者在您的情况下，由于您使用矩阵，只需设置 @987654323 @ 创建时（适用于 Android）。

这是您为 iOS 所做的事情：

/* iOS */
var image = Titanium.UI.createImageView({
    backgroundImage:'test.png',
    width: 650,
    height: 650,
    anchorPoint: {0.5, 0.5}, // ANchor point is at the center
});

或者，在 Android 上：

/* Android */
// Matrix, inside your event listener
image.addEventListener('touchmove', function(e){

    var conv = e.source.convertPointToView({x: e.x, y:e.y}, win);

    var newAngle = Math.atan2(conv.y - 500, 380 - conv.x)* -(180 / Math.PI);
    current = (newAngle-diff); 

    // Note that I set the anchor point here.
    var t = Ti.UI.create2DMatrix({anchorPoint: {0.5, 0.5}}).rotate(current);
    wheel.transform = t;
});