3

我发现自己处于一个相当脆弱的境地，我正在开发一个 Web 应用程序，其界面几乎完全使用 RaphaelJS 作为 SVG 的前端来表达，但无法访问目标系统（不要让我开始）。目标系统是运行 Windows 7 的Asus Slate 设备，并且支持触摸屏。

我的理解是 Raphael 的drag支持会自动包含简单的触摸事件——因此触摸屏会自动像鼠标一样工作。但是，可拖动元素在石板上变得不具有交互性。我尝试使用 Raphael 的touchstart,touchend和touchmoveevents 与我传递给 的相同函数drag，如下所示：

var element = canvas.circle( canvas.cwidth / 2, canvas.cheight / 2, 100 ).attr( { fill: 'red', stroke: 'black', 'stroke-width': 5, cursor: 'move' } );

var startDrag = function( x, y )
{
    console.log("starting drag" );
    element.attr( { 'fill-opacity': 0.5 } );
};
var endDrag = function( x, y )
{
    console.log("stopping drag" );
    element.animate( { transform: "T0,0", fill: 'red', 'fill-opacity': 1 }, 1000, 'bounce' );
};
var continueDrag = function( dx, dy, x, y )
{        
    var r = Math.sqrt( dx * dx + dy * dy ) / ( canvas.cwidth / 2 ) * 255;
    var g = x / canvas.cwidth * 255;
    var b = y / canvas.cheight * 255;
    element.transform( [ "T", dx, dy ] );
    element.attr( 'fill', Raphael.rgb( r, g, b ) );
};

element.touchstart( startDrag );
element.touchend( endDrag );
element.touchmove( continueDrag );
element.drag( continueDrag, startDrag, endDrag );

不幸的是，这根本没有效果。

谁能给我提供任何有用的设备，不包括飞往德克萨斯州以获得对目标设备的开发访问权限？

4

1 回答 1

4

好吧，这适用于 PlayBook，它不需要使用触摸事件，而不是等效于单击事件

/* Set up generic drag */   
var start=function() {
    this.data("oldt", this.transform());                 
}, move = function(dx, dy) {
    // Set up reluctance:- only move if changed by at least 25 pixels
    if (dx>=25 || dy>=25){
        this.attr("fill","blue");
        this.transform(this.data("oldt") + "T" + dx + "," + dy);
        this.data("move", "T" + dx + "," + dy);
    }}, up = function() {
        this.attr("fill","green")   
    };  
    var box = canvas.rect(150,50,100,100).attr("fill", "white");
    box.drag(move,start,up);
    box.touchstart(function(){
    this.attr("fill","red");
});

如果框被拖动，它会在释放时变为蓝色和绿色。如果被触摸，它会变成红色，直到它被移动。磁阻降低了对运动的敏感度，因此触摸事件不会因小运动而变成拖动。看到这个线程。

于 2012-09-18T20:38:07.153 回答