2

私は描画アプリを作成しようとしており、現在線ツールで作業しており、Microsoft Paint やその他の描画アプリケーションに存在するようなプレビューが必要です。

私は HTML5 Canvas と Javascript を使用しており、次のような典型的なキャンバス描画 API も使用しています。

context.beginPath();
context.moveTo(originX, originY);
context.lineTo(mousePos.x, mousePos.y);
context.stroke();

ただし、ユーザーが必要な行を決定しようとすると、前の行が消去されないため、次のようになります。

ここに画像の説明を入力

真ん中の点は、ユーザーが線を引き始めた原点です。他のものが描かれている可能性があるため、毎回キャンバスをクリアすることはできません。私が考えることができる唯一の解決策は、何らかの元に戻す機能を実装することですが、それは遅くてずさんなようです。

この種のプレビュー機能を実装する方法を知っている人はいますか?

4

1 に答える 1

4

私がお勧めするのは、複数のキャンバスを使用することです。

ライブデモ

したがって、基本的には、クリアし続ける上部の予備描画を行い、マウスボタンを離すと、下部の「永続的な」キャンバスに描画します。

jsFiddle が最近遅いので、フィドルからのコードを参照用に追加します。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    drawCanvas = document.getElementById("drawCanvas"),
    drawCtx = drawCanvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    curX = 0,
    curY = 0,
    startX = 0,
    startY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;

drawCanvas.width = drawCanvas.height = 600;

drawCanvas.onmousedown = function(e) {
    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;
    painting = true;

};

drawCanvas.onmouseup = function(e){
    painting = false;

    ctx.strokeStyle = "#000";
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(lastX, lastY);
    ctx.stroke();

    drawCtx.clearRect(0, 0, 600, 600);
}

drawCanvas.onmouseclick = function(e) {

    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;

    painting = true;
};


drawCanvas.onmousemove = function(e) {
    if(painting){
        lastX = e.pageX - this.offsetLeft;
        lastY = e.pageY - this.offsetTop;
        drawCtx.clearRect(0,0,600,600);
        drawCtx.beginPath();
        drawCtx.moveTo(startX ,startY );
        drawCtx.lineTo(lastX, lastY);
        drawCtx.stroke();
    }
}
​
于 2012-06-29T20:46:48.257 に答える