0
192
Viewscambiar el alfa por el color de fondo del lienzo
Hola, estoy tratando de clonar el selector de rueda colol de la rueda de color de Adobe, tengo un problema al cambiar el alfa de la rueda de color, el código que usé para generar la rueda de color se hace referencia desde aquí . A continuación se muestra el código que uso para cambie el alfa para el fondo del lienzo (el alfa predeterminado es 255), pero no funciona, todavía no puedo entender por qué
useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let ImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < canvas.height; i++) for (var j = 0; j < canvas.width; j++) if ((i + 1) % 4 === 0) { ImageData.data[i] = 150; } ctx.putImageData(ImageData, 0, 0); //put image data back }, []);puede encontrar el código completo y la demostración aquí , gracias
2 answers
Answer question0
Supongo que desea cambiar el valor alfa de cada componente de color contenido en la matriz ImageData , ¿verdad?
En este caso, su ciclo for es simplemente incorrecto. Para fines ilustrativos, intente algo como esto:
let canvas = { width: 100, height: 20 }; let values = []; for (var i = 0; i < canvas.height; i++) for (var j = 0; j < canvas.width; j++) if ((i + 1) % 4 === 0) { values.push(i); } document.getElementById("result").innerText = values.toString(); #result { width: 20em; display: block; word-break: break-all; } <span id="result"></span>Si ejecuta el código anterior, notará que los únicos valores únicos que obtenemos son 3 , 7 , 11 , 15 y 19 .
Si desea cambiar el alfa de toda la matriz ImageData, simplemente debe recorrerlo y cambiar cualquier cuarto valor. Por ejemplo:
let ImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (let i = 0; i < ImageData.length; i += 4) { ImageData.data[i] = 150; }0
Si lo que necesita es cambiar el alfa, debe usar el lienzo globalAlpha:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
Aquí hay un ejemplo dibujando la misma forma con diferentes valores alfa
canvas = document.getElementById("cv0"); ctx = canvas.getContext('2d') ctx.fillStyle = "red" function draw(x, y, alpha) { ctx.globalAlpha = alpha ctx.beginPath() ctx.moveTo(x, y) ctx.arc(x+20, y-10, 30, 0, 6) ctx.fill() ctx.globalAlpha = 1 } draw(10, 40, 0.4) draw(80, 40, 0.7) draw(150, 40, 1) <canvas id='cv0' width=200 height=90></canvas> Cuando proporcione un fragmento de muestra, elimine todas las demás funciones, variables y cualquier otra cosa que no sea relevante para el problema en cuestión, lea esto para obtener más información:
https://stackoverflow.com/help/minimal-reproducible-example
eso ahorrará mucho tiempo a todos los que lean su código por primera vez, y aumentará sus posibilidades de obtener una respuesta rápida.
Aquí están mis cambios a su fragmento de código:
https://codesandbox.io/s/gracious-fog-q303zf?file=/src/Canvas.js
Estoy usando globalAlpha para dibujar dos círculos (como el tuyo solo más pequeño) con alfa diferente
