绘制后在画布上更改笔的颜色

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

希望这有助于！