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

你必须设置动画/视图anchorPoint，在iOS上你必须设置Ti.UI.View's anchorPoint，在Android上你必须设置Ti.UI.Animation's anchorPoint或者在你的情况下，因为你使用的是Matrix，在创建时设置anchorPoint of the Matrix（对于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;
});

设置旋转中心[钛]

1 个答案: