3

SVG のフロント エンドとして RaphaelJS を使用してほぼ完全に表現されたインターフェイスを備えた Web アプリケーションを開発しているが、ターゲット システムにアクセスできないというかなり希薄な状況に陥っています (始めないでください)。ターゲット システムは、Windows 7 を実行するAsus Slate デバイスで、タッチスクリーン対応です。

私の理解では、Raphael のdragサポートには単純なタッチ イベントが自動的に含まれるので、タッチスクリーンは自動的にマウスのように動作します。ただし、ドラッグ可能な要素はスレート上でインタラクティブではなくなります。次のように、 に渡すのと同じ関数でRaphael のtouchstart、touchend、およびイベントを使用してみました。touchmovedrag

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 に答える