Реализация гладкого эскиза и рисования на элементе <canvas>

Ответ 1

Я сделал что-то вроде этого некоторое время назад и превратил его в плагин jquery. посмотрите здесь, если это произойдет после того, как я опубликую более подробный ответ и выкопаю упрощенную версию jquery из моих архивов:

http://jsfiddle.net/95tft/

ИЗМЕНИТЬ

ОК, извините, я не мог этого сделать вчера:

Изначально вышеприведенный код был разветвлен у мистера Доуба "гармония": http://mrdoob.com/projects/harmony/#ribbon

(что я считаю лучшим решением). Но я как-то сломал его и переделал для своих целей в другом проекте. Я немного взломал свой собственный плагин, чтобы сделать его еще проще:

http://jsfiddle.net/dh3bj/

Единственное, что вы, возможно, захотите изменить, - это изменить его для работы с mousedown/mouseup, что должно быть легко также посмотреть на настройки в нижней части плагина, вы сможете получить желаемый эффект игра с размером кисти, цветом, альфа (rgba) и т.д.

Надеюсь, что поможет

Ответ 2

Посмотрите на этот код:

http://jsfiddle.net/aMmVQ/

Что я делаю, это начать новый список точек на mouseDown, затем для каждого mousemove я добавляю точку в список. Как только я получаю достаточно очков (6 или около того), я начинаю рисовать квадратичные кривые, причем контрольной точкой кривой является среднее значение текущей точки и следующей точки.

drawPoints - бит, который работает с этой магией:

function drawPoints(ctx, points) {
    // draw a basic circle instead
    if (points.length < 6) {
        var b = points[0];
        ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill();
        return
    }
    ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
    // draw a bunch of quadratics, using the average of two points as the control point
    for (i = 1; i < points.length - 2; i++) {
        var c = (points[i].x + points[i + 1].x) / 2,
            d = (points[i].y + points[i + 1].y) / 2;
        ctx.quadraticCurveTo(points[i].x, points[i].y, c, d)
    }
    ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y), ctx.stroke()
}

Ответ 3

Почему бы вам не использовать croquis.js?

У него есть аккуратная реализация кисти, например, фотошоп:)

И вот Демо, использующая croquis.js.

Ответ 4

Кажется, вам нужно использовать несколько кистей на вашем холсте. Трудно сказать, какая именно кисть вам нужна, но есть много JS-библиотек, которые уже используют технологию кисти.

Например, вы посмотрели на эти библиотеки?

• Processing.js
• HTML5-Canvas-Brush-Sketch (демонстрация и статья, как это работает)

Laso в Интернете вы можете найти множество кистей, реализованных в проекте Mr. Doob Harmony. Например stringy или Harmony-Brushes проект на github.

Ответ 5

Предложите рендеринг выполнить цепочку кривых безье, которые окружают кривую, заполненную таким образом. (т.е. завершение ctx.fill) Все еще много работы, но надеюсь, что это поможет.

Адаптировано хорошее демо-приложение для кривых Безье

добавил его к вилке вашей скрипки http://jsfiddle.net/d3zFU/1/

Код

/*
 * Canvas curves example
 *
 * By Craig Buckler,        http://twitter.com/craigbuckler
 * of OptimalWorks.net        http://optimalworks.net/
 * for SitePoint.com        http://sitepoint.com/
 *
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
 *
 * This code can be used without restriction.
 */

(function() {

var canvas, ctx, code, point, style, drag = null, dPoint;

// define initial points
function Init(quadratic) {

    point = {
        p1: { x:100, y:250 },
        p2: { x:400, y:250 }
    };

    if (quadratic) {
        point.cp1 = { x: 250, y: 100 };
    }
    else {
        point.cp1 = { x: 150, y: 100 };
        point.cp2 = { x: 350, y: 100 };
    }

    // default styles
    style = {
        curve:    { width: 6, color: "#333" },
        cpline:    { width: 1, color: "#C00" },
        point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
    }

    // line style defaults
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    // event handlers
    canvas.onmousedown = DragStart;
    canvas.onmousemove = Dragging;
    canvas.onmouseup = canvas.onmouseout = DragEnd;

    DrawCanvas();
}


// draw canvas
function DrawCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // control lines
    ctx.lineWidth = style.cpline.width;
    ctx.strokeStyle = style.cpline.color;
    ctx.fillStyle = style.cpline.color;
    ctx.beginPath();
    ctx.moveTo(point.p1.x, point.p1.y);
    ctx.lineTo(point.cp1.x, point.cp1.y);
    if (point.cp2) {
        ctx.moveTo(point.p2.x, point.p2.y);
        ctx.lineTo(point.cp2.x, point.cp2.y);
    }
    else {
        ctx.lineTo(point.p2.x, point.p2.y);
    }
    ctx.stroke();

    // curve
ctx.lineWidth = 1 ; //style.curve.width;
    ctx.strokeStyle = style.curve.color;
    ctx.beginPath();
    ctx.moveTo(point.p1.x, point.p1.y);
    if (point.cp2) {
        ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
        ctx.bezierCurveTo(point.cp2.x, point.cp2.y+12, point.cp1.x, point.cp1.y+12, point.p1.x, point.p1.y);

    }
    else {
        ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
    }
//ctx.stroke();
ctx.fill();

    // control points
    for (var p in point) {
        ctx.lineWidth = style.point.width;
        ctx.strokeStyle = style.point.color;
        ctx.fillStyle = style.point.fill;
        ctx.beginPath();
        ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
        ctx.fill();
        ctx.stroke();
    }

    ShowCode();
}


// show canvas code
function ShowCode() {
    if (code) {
        code.firstChild.nodeValue =
            "canvas = document.getElementById(\"canvas\");\n"+
            "ctx = canvas.getContext(\"2d\")\n"+
            "ctx.lineWidth = " + style.curve.width +
            ";\nctx.strokeStyle = \"" + style.curve.color +
            "\";\nctx.beginPath();\n" +
            "ctx.moveTo(" + point.p1.x + ", " + point.p1.y +");\n" +
            (point.cp2 ?
                "ctx.bezierCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.cp2.x+", "+point.cp2.y+", "+point.p2.x+", "+point.p2.y+");" :
                "ctx.quadraticCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.p2.x+", "+point.p2.y+");"
            ) +
            "\nctx.stroke();"
        ;
    }
}


// start dragging
function DragStart(e) {
    e = MousePos(e);
    var dx, dy;
    for (var p in point) {
        dx = point[p].x - e.x;
        dy = point[p].y - e.y;
        if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
            drag = p;
            dPoint = e;
            canvas.style.cursor = "move";
            return;
        }
    }
}


// dragging
function Dragging(e) {
    if (drag) {
        e = MousePos(e);
        point[drag].x += e.x - dPoint.x;
        point[drag].y += e.y - dPoint.y;
        dPoint = e;
        DrawCanvas();
    }
}


// end dragging
function DragEnd(e) {
    drag = null;
    canvas.style.cursor = "default";
    DrawCanvas();
}


// event parser
function MousePos(event) {
    event = (event ? event : window.event);
    return {
        x: event.pageX - canvas.offsetLeft,
        y: event.pageY - canvas.offsetTop
    }
}


// start
canvas = document.getElementById("canvas");
code = document.getElementById("code");
if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    Init(canvas.className == "quadratic");
}

})();

Ответ 6

Для тех, кто интересуется кликой версии кода, предоставленной @Alex, я переписал его script здесь:

http://jsbin.com/aqoqad/3/