svg - Asus Slate 平板电脑上的 RaphaelJS Touch 支持

Question

我发现自己处在一个相当脆弱的境地，我正在开发一个 Web 应用程序，其界面几乎完全使用 RaphaelJS 作为 SVG 的前端来表示，但无法访问目标系统(别误会我的意思开始)。目标系统是 Asus Slate device运行 Windows 7，并且启用了触摸屏。

我的理解是 Raphael 的 drag 支持会自动包含简单的触摸事件——这样触摸屏就会自动像鼠标一样运行。但是，可拖动元素在平板上变得不可交互。我尝试使用 Raphael 的 touchstart、touchend 和 touchmove 事件，它们具有我传递给 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 );

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

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

Answer 1

好吧，这适用于 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");
});

如果框被拖动，松开时它会变成蓝色和绿色。如果被触摸，它会变成红色，直到它被移动。不情愿降低了对移动的敏感度，使得触摸事件不会因小移动而变成拖拽。参见 this thread .