Question

我想在我的应用程序中拖动一个视图，下面是我的代码。我有一个id =＆＃34; win＆＃34;和一个方形视图（100x100）。

var window = $.win;
var lastTouchPosition = 0;
$.demo.addEventListener("touchstart", function(e){
    var touchPos = {x:e.x, y:e.y};
        lastTouchPosition = $.demo.convertPointToView(touchPos, window);
});

$.demo.addEventListener("touchmove", function(e){
    var touchPos = {x:e.x, y:e.y};
    var newTouchPosition = $.demo.convertPointToView(touchPos, window);

    $.demo.top += Number(newTouchPosition.y) -    Number(lastTouchPosition.y);
    $.demo.left +=  Number(newTouchPosition.x) - Number(lastTouchPosition.y);
    //lastTouchPosition = newTouchPosition;

});

当我开始拖动视图时，我得到以下警告：[WARN]：请求的维度值（nan）无效。使维度未定义。我的观点并没有动。你能给我一个想法，请问我如何开始拖动视图并在达到特定的垂直位置值时停止拖动它（例如：视口的底部）

感谢您的帮助。

Answer 1

我会将触摸事件添加到窗口/容器视图中，而不是像这样：

var WIDTH = (OS_ANDROID) ? Ti.Platform.displayCaps.platformWidth / dpi : Ti.Platform.displayCaps.platformWidth;
var HEIGHT = (OS_ANDROID) ? Ti.Platform.displayCaps.platformHeight / dpi : Ti.Platform.displayCaps.platformHeight;
var sx = 0;
var sy = 0;
var cx = 0;
var cy = 0;
var xDistance = 0;

function onTouchStart(e) {
    // start movement
    sx = e.x;
    sy = e.y;
    cx = e.x;
    cy = e.y;
}

function onTouchMove(e) {
    xDistance = cx - sx;
    var yDistance = cy - sy;

    var rotationStrength = Math.min(xDistance / (WIDTH), 1);
    var rotationStrengthY = Math.min(yDistance / (HEIGHT), 1);

    var rotationAngel = (2 * Math.PI * rotationStrength / 16);
    var scaleStrength = 1 - Math.abs(rotationStrength) / 16;
    var scaleStrengthY = 1 - Math.abs(rotationStrengthY) / 16;

    var scaleMax = Math.min(scaleStrength, scaleStrengthY);
    var scale = Math.max(scaleMax, 0.93);

    $.view_card_front.rotation = rotationAngel * 20;
    $.view_card_front.translationX = xDistance;
    $.view_card_front.setTranslationY(yDistance);
    $.view_card_front.scaleX = scale;
    $.view_card_front.scaleY = scale;

    cx = e.x;
    cy = e.y;
}

function onTouchEnd(e) {
  // check xDistance
}

$.index.addEventListener("touchmove", onTouchMove);
$.index.addEventListener("touchstart", onTouchStart);
$.index.addEventListener("touchend", onTouchEnd);

在XML中有<View id="view_card_front"/> touchEnabled:false

这将为您提供一个很好的平滑移动（在此示例中为旋转）

Titanium appcelerator拖动视图

1 个答案: