如何預覽線條工具？

我正在試圖製作一個繪圖應用程序，目前正在使用這一行工具，並希望在Microsoft Paint和其他繪圖應用程序中存在預覽。如何預覽線條工具？

我使用HTML5 Canvas和Javascript和我還用典型的畫布繪製API，像這樣：

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

然而，它開始看起來像這樣當用戶試圖確定他想要的，因爲這行它不會刪除前行：

enter image description here

中間的點是從用戶開始從畫線的原點。我無法每次清除畫布，因爲還有其他可能畫出的東西。我唯一能想到的解決方案是實現某種撤消功能，但看起來它會變得緩慢和不穩定。

有沒有人有關於如何實現這種預覽功能的任何想法？

來源

2012-06-29 Ryan Peschel

我會推薦使用多個畫布。

Live Demo

所以基本上他們做頂部一個繼續清除預拉伸，而一旦鬆開鼠標按鈕，它然後它繪製到較低的「永久」畫布。

來自小提琴的代碼，因爲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-29 20:46:48 Loktar

如何預覽線條工具？

回答

相關問題