繪製後在畫布上更改筆的顏色

Question

我試圖在繪製後更改畫布內容的顏色。所以如果你開始繪製一個綠色的圓圈，你可以稍後再決定將之前繪製的圓圈變成一個紅色的圓圈。

我在這裏使用signaturePad插件： https://github.com/szimek/signature_pad

我有一些內置的功能，但筆的顏色變化並沒有改變以前繪製的元素。這裏是小提琴： http://jsfiddle.net/Z6g5Z/

感謝您的幫助！小提琴是可能的。查看問題的最佳方式，但JS和標記如下。

var canvas = $("#can")[0]; 
var signaturePad = new SignaturePad(canvas, { 
    minWidth: 2, 
    maxWidth: 5, 
    penColor: "rgb(66, 133, 244)" 
}); 

$('#clear').click(function(){ 
    signaturePad.clear(); 
}); 

$('.global-color li').click(function(){ 
    $('.on').removeClass('on'); 
    var $t = $(this); 
    $t.addClass('on'); 
    var selectedColor = $t.data('color'); 
    signaturePad.penColor = hexToRgb(selectedColor); 
}); 


<ul class="global-color"> 
    <li class="yellow-pick" data-color="#f8c90d">yellow</li> 
    <li class="green-pick" data-color="#3dae49">green</li> 
    <li class="orange-pick" data-color="#e87425">orange</li> 
    <li class="blue-pick on" data-color="#009cc5">blue</li> 
</ul> 
<div> 
    <input id="clear" type="button" value="clear" /> 
</div> 
<canvas id="can" width="200px" height="200px"></canvas> 

Answer 1

在您的顏色更改處理程序中，讓所有畫布將其（不透明）像素更改爲新顏色。
對於這一點，最簡單的就是用globalComposite操作模式「源式」，並填寫了新的色彩在畫布上：

// set all pixels of the image to this color 
function setCurrentColor(canvas, color) { 
    var context = canvas.getContext('2d'); 
    context.save(); 
    context.fillStyle = color; 
    context.globalCompositeOperation = 'source-in'; 
    context.fillRect(0,0,canvas.width, canvas.height); 
    context.restore(); 
} 

我更新您的演示： http://jsfiddle.net/gamealchemist/Z6g5Z/3/

Answer 2

您可以通過更改複合模式並在現有內容上填寫所需的顏色。

有了這樣的庫，你不能保證它的內部工作，所以它可能在今天工作，明天可能無法工作 - 如果作者決定改變它在內部的行爲方式。

所以與免責聲明你可以使用下面的代碼更改現有圖形的顏色 - 這工作一般與所有帆布圖紙和你畫在上面改變非透明像素：

function changeColor() { 
    ctx.save(); 
    ctx.globalCompositeOperation = 'source-atop'; 
    ctx.fillStyle = selectedColor; 
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    ctx.restore(); 
} 

然而，由於我們要進入圖書館，這裏至少還有一個限制。該庫似乎在註冊鼠標的頂部使用了第二個畫布。當筆向上時，它將該繪圖轉移到主畫布上。對我們來說，這樣做的缺點是筆更換不會發生，直到我們繪製新的東西;我們不能通過使用上述功能直觀地改變筆的顏色 - 因爲您必須修補庫來添加例如一種內部完成所有步驟的方法。

但是我們通過添加以下設置親近：

var signaturePad = new SignaturePad(canvas, { 
    minWidth: 2, 
    maxWidth: 5, 
    penColor: "rgb(66, 133, 244)", 
    onBegin: changeColor    /// add callback here 
}); 

Live demo here

希望這有助於！