Android mcanvas vs svg vs html5画布

我最近在手机浏览器中进行了测试，它有拉斐尔画布，我们可以使用平板电脑绘制线条等

使用svg在浏览器上绘制时速度和精度不足，例如，即使在移动过程中触摸未停止，绘制时线条也会在两者之间打断

因此，我正在研究绘图应用程序中使用了什么，它可以完美地用于触摸屏

如果我们想在移动浏览器上有一个绘图应用程序，它最好是画布或svg，或者两者都不是，因为我们不想在绘图时断线

在那里，我可以开始研究更多的绘图api，android用于“笔备忘录、S2和其他触摸应用程序”的绘图

更新：检查此项

---

提到的关于速度和性能的问题对于SVG中使用的JavaScript库更为本质。在您的小提琴中，绘图中的性能问题主要是因为路径数组不断扩展，并且在每次触摸移动时都会重新处理整个路径数组。解决这个问题没有比解决它更简单的方法了

我已经用纯Raphael（没有jQuery）重新创建了您的实现

实施有两个方面：

它绕过Raphael的重载

attr

函数，直接使用

doodle.node.setAttribute（'d'，pathstring）设置元素的路径

它使用一个超时来忽略在可容忍的时间间隔内的上下触碰

小提琴（从第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);
    });
});

---

在我看来，这更像是一个实施问题。两者都适合你所提到的。有没有办法为应用程序中的某个部分创建一个提琴来划清界限？@ShamasisBhattacharya刚刚用jsfiddle更新了这个实现需要做一些修改。我会花一些时间在上面，然后创建一个提琴。你的代码运行得更好。你能解释一下你评论过的Raphael touch修复程序吗？你能告诉我为什么不使用jquery进行鼠标/触摸事件吗？（1）Raphael touch修复程序防止在某些触摸设备（包括iOS 6）上获得触摸x、y的NaN、NaN。（2） 只需坚持一个库+Raphael的事件处理程序更轻（+更原生）！我正在尝试您的示例而不使用矩形的事件，使用Rahphael MouseeEvents，这在使用鼠标而不是触摸板时工作正常。你能告诉我我做错了什么吗？为什么这样做？整个Windows的鼠标按下将被此触发。

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);
    });
});