0

最近、タブレットを使用して線などを描画できるRaphaelキャンバスを備えたモバイル ブラウザーでテストしました。

svg を使用してブラウザーで描画する場合、速度と精度が不足します。たとえば、移動中にタッチが停止していないにもかかわらず、描画中に線が途切れるなどです。

だから私は、タッチスクリーンで完全に機能する描画アプリで何が使用されているかを研究しています。

また、描画時に線を分割したくないので、キャンバスまたは svg に最適なモバイル ブラウザーで描画アプリを使用したい場合はどうすればよいでしょうか?

そして、「ペンメモ、S2、その他のタッチアプリ」で使用される描画用にAndroidで使用される描画APIについて、さらに研究を開始できます。

更新：このjsfiddleを確認してください

var canvas = $("#canvas");
paper = Raphael("canvas");
var clicking = false;
var line;
var pathArray = [];

 canvas.bind("mousedown", _mousedownHandler);
 canvas.bind("touchstart", _mousedownHandler);
function _mousedownHandler(event){
     clicking = true;
 // _drawArrowLineBegin(e);
        if(event.type == "touchstart"){
            event.preventDefault(); 
            event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
        }
    _drawFreeLineBegin(event);
};

function _mousemoveHandler(event){
 // _drawArrowLineMove(event);
        if(event.type == "touchmove"){
            event.preventDefault(); 
            event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
        }
    _drawFreeLineMove(event);
};
function _mouseupHandler(event){
    clicking = false;
};
function _enableEvents(){
           canvas.bind("mousemove.mmu", _mousemoveHandler);
        canvas.one("mouseup.mmu", _mouseupHandler);
        canvas.bind("touchmove.mmu", _mousemoveHandler);
        canvas.one("touchend.mmu", _mouseupHandler);
};
function _drawArrowLineBegin(e) {
    clicking = true;
        line = paper.path("M" + (e.offsetX || e.clientX) + " " + (e.offsetY || e.clientY) + "L" + (e.offsetX || e.clientX) + " " + (e.offsetY || e.clientY)).attr({stroke:'#FF0000', 'stroke-width': 2, 'arrow-end': 'classic-wide-long'});
    pathArray = line.attr("path");
 _enableEvents();
    }
function _drawArrowLineMove(e){
        if(clicking == false) return;
    if (pathArray[1][1] != undefined) { // not IE 8
        pathArray[1][1] = e.offsetX || e.clientX;
        pathArray[1][2] = e.offsetY || e.clientY;
    } else {
        pathArray = pathArray.replace(/L\d+ \d+$/, "L" + e.offsetX + " " + e.offsetY);
    }

    line.attr({path: pathArray});
}
function _drawFreeLineBegin(e) {
    clicking = true;
       line =  paper.path("M"
                + (e.pageX) + ","
                + (e.pageY)).attr({stroke:'#FF0000', 'stroke-width': 2});
     pathArray = line.attr("path");
_enableEvents();
    }
function _drawFreeLineMove(e){
        if(clicking == false) return;
    line.attr("path",line.attr("path")
                        + "L"
                                    + (e.pageX)
                                    + ","
                                    + (event.pageY));
}
4

1 に答える 1

1

速度とパフォーマンスに関して言及されている問題は、SVG で使用されている JavaScript ライブラリに固有のものです。あなたのフィドルでは、描画のパフォーマンスの問題は主に、拡大し続けるパスの配列と、パス配列全体がタッチのたびに再処理されるという事実によるものです。これを回避する以外に、これを修正する簡単な方法はありません。

純粋な Raphael (jQuery なし) で実装を再作成しました。 http://jsfiddle.net/shamasis/kUQ7E/

実装には次の 2 つの側面があります。

  1. Raphael の重いattr関数をバイパスし、要素のパスを直接設定します。doodle.node.setAttribute('d', pathstring);
  2. タイムアウトを使用して、許容可能な間隔内でタッチアップとタッチダウンを無視します。

フィドル (リビジョン 24 以降) は次のようになります。

Raphael("canvas", function () {
    var win = Raphael._g.win,
        doc = win.document,
        hasTouch = "createTouch" in doc,

        M = "M",
        L = "L",
        d = "d",
        COMMA = ",",
        // constant for waiting doodle stop
        INTERRUPT_TIMEOUT_MS = hasTouch ? 100 : 1,
        // offset for better visual accuracy
        CURSOR_OFFSET = hasTouch ? 0 : -10,

        paper = this,
        path = "", // hold doodle path commands
        // this element draws the doodle
        doodle = paper.path(path).attr({
            "stroke": "rgb(255,0,0)"
        }),

        // this is to capture mouse movements
        tracker = paper.rect(0, 0, paper.width, paper.height).attr({
            "fill": "rgb(255,255,255)",
            "fill-opacity": "0.01"
        }),
        active = false, // flag to check active doodling
        repath = false, // flag to check if a new segment starts
        interrupt; // this is to connect jittery touch

    tracker.mousedown(function () {
        interrupt && (interrupt = clearTimeout(interrupt));
        active = true;
        repath = true;
    });

    tracker.mousemove(function (e, x, y) {
        // do nothing if doodling is inactive
        if (!active) {
            return;
        }

        // Fix for Raphael's touch xy bug
        if (hasTouch && 
                (e.originalEvent.targetTouches.length === 1)) {
            x = e.clientX + 
                (doc.documentElement.scrollTop || doc.body.scrollTop || 0);
            y = e.clientY + 
                (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0);
            e.preventDefault();
        }

        // Insert move command for a new segment
        if (repath) {
            path += M + (x + CURSOR_OFFSET) + COMMA + 
                    (y + CURSOR_OFFSET);
            repath = false;
        }
        path += L + (x + CURSOR_OFFSET) + COMMA + 
                (y + CURSOR_OFFSET); // append line point

        // directly access SVG element and set path
        doodle.node.setAttribute(d, path);
    });

    // track window mouse up to ensure mouse up even outside
    // paper works.
    Raphael.mouseup(function () {
        interrupt && (interrupt = clearTimeout(interrupt));
        // wait sometime before deactivating doodle
        interrupt = setTimeout(function () {
            active = false;
        }, INTERRUPT_TIMEOUT_MS);
    });
});
于 2013-07-22T06:32:46.173 に答える