0

我正在看这个例子。在下面的例子中，如何使用 Raphael 来做到这一点？

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

以上代码复制自https://stackoverflow.com/a/17781275/1595858

4

2 回答 2

0

在您的案例中平滑线条（使用 Raphael）的最简单方法是使用该Raphael._path2curve函数。

您正在做的地方doodle.node.setAttribute(d, path);用下面的线替换它，从而用曲线替换所有线段。

doodle.node.setAttribute(d, Raphael._path2curve(path));

请注意，这将导致性能下降。通过实时将路径转换为曲线而不是每次都转换整个路径，可以大大改善这一点。

于 2013-08-26T03:52:33.707 回答
0

要创建通过多个点的平滑线，请使用 Raphael 对 SVG 路径的 Catmull-Rom 扩展。请参阅：http ://raphaeljs.com/reference.html#Paper.path 。

// Creating a line:

var line = paper.path("M x0 y0 R x1 y1 x2 y2 x3 y3 x4 y4");



// Adding next point:

line.attr("path", line.attr("path") + " x5 y5");
于 2013-08-12T14:21:40.480 回答