El objeto canvas
no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria.
En este ejemplo, encapsulo las llamadas recursivas en un try
catch
en un intento de evitar un error irrecuperable, evidentementeEDIT: He retocado el código es mejorablede relleno, pero alpara que funcione a base de lineas y no de píxeles, de manera que hace menos pintará una partellamadas recursivas. Parece que funciona mejor y es más estable.
Además, al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.
Este ejemplo no es una solución realista, ya que no siempreComo funciona, pero te podrás hacer una idea:
Almacena el color nuevo y el de como solucionarlo, encontrando un códigofondo
Si el color nuevo y el de relleno mejorfondo son distintos, llama a la funcion rellenar.
funcion rellenar:
- Si el color del pixel actual, no es el color a rellenar, sale.
- pinta la linea horizontal del punto seleccionado.
- Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;
function cargarDibujo() {
marco = document.getElementById('dibujo');
contexto = marco.getContext('2d');
var img = new Image();
img.src = "data:image/png;base64,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";
img.onload = function() {
contexto.drawImage(img, 0, 0);
}
}
function setColor(color) {
colorNuevoHex = color;
document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}
function rellenarFiguraCanvas(obj,x,y,color){
}
function cambiarColor() {
var obj = marco;
var w = obj.width;
var h = obj.height;
var context = obj.getContext('2d');
var image = context.getImageData(0,0,w,h);
var data = image.data;
var x = mouseX;
var y = mouseY;
var offset=(y*w+x)*4;
var fondoRGB = {r:data[offset],
g:data[offset+1],
b:data[offset+2]
};
if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
var colorNuevoRGB = hexToRgb(colorNuevoHex);
var rellenar = function(x,y){
var offset=(y*w+x)*4;
data[offset]=colorNuevoRGBif (!(data[offset]==fondoRGB.r;r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
data[offset+1]=colorNuevoRGB.g;
data[offset+2]=colorNuevoRGB.b;var ini, fin;
try{var salir=false;
var yw=y*w;
offset=( ini=x;
for (ylet i=x; !salir && i>=0 ; i-1-)*w+x{
offset=(yw+i)*4;
ifsalir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
if (!salir){
rellenar(x,y-1);data[offset]=colorNuevoRGB.r;
data[offset+1]=colorNuevoRGB.g;
data[offset+2]=colorNuevoRGB.b;
ini=i;
}
}
salir=false;
fin=x;
for (let i=x+1; !salir && i<=w ; i++){
offset=(y*w+x+1yw+i)*4;
ifsalir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
if (!salir){
rellenardata[offset]=colorNuevoRGB.r;
data[offset+1]=colorNuevoRGB.g;
data[offset+2]=colorNuevoRGB.b;
fin=i;
}
}
for (x+1,y)let i=ini; i<=fin ; i++){
}if (y>0){
offset=((y+1y-1)*w+x*w+i)*4;
if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
rellenar (xi,y+1y-1);
}
}
if (y<h){
offset=(y*w+x-1(y+1)*w+i)*4;
if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
rellenar (x-1i,yy+1);
}
} catch(e){console.log(e); }
}
}
if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
rellenar(x,y);
context.putImageData(image, 0, 0);
}
}
function setCoords(e) {
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
} else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
<body onload="cargarDibujo();">
<canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
<hr />
<div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
<p id="coords"></p>
<hr />
<button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
<button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
<button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
<button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
<button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>