Tính toán giá trị độ mờ bằng toán học

Question

Độ mờ được tính toán như thế nào?

Có giá trị độ mờ trong Photoshop, CSS vv Thực tế độ mờ đục này là hành vi trong suốt của một lớp. Điều đó tất cả chúng ta đều biết. Nhưng nó được tính toán như thế nào? Có phương trình nào để tính độ mờ không?

Bằng cách đặt giá trị độ mờ cho những gì đang xảy ra ở đó?

Lấy trường hợp của lớp màu đơn giản: Lớp 1 (Foreground Layer) và lớp 2 (layer background)

Layer 1 là màu đỏ (nói giá trị màu A) và lớp 2 là màu trắng (nói giá trị màu B) .

Khi chúng tôi đặt độ mờ (nói p) thành lớp 1, chúng tôi có thể đặt 0,5 hoặc 50% và có màu đỏ trắng (nói giá trị màu X).

Để nhận giá trị này X tôi nên làm gì về toán học?

tức là.

X = (things which will be a relation containing p, A and B) 

Tôi muốn biết phương trình toán học chính xác để tìm X.

Ngoài ra nếu tôi có phương trình, và giá trị màu là hệ thập lục phân trong tự nhiên, vì vậy với một máy tính hex tôi có thể có được kết quả chính xác không?

Answer 1

Công thức kết hợp C1 = (R1,G1,B1) và C2 = (R2,G2,B2) thành một màu mới C3, nơi C2 được chồng chập lên C1 với opacity p thường ((1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2) là.

Xem Wikipedia article on transparency để biết thêm thông tin.

Answer 2

Các javascript dưới đây đưa ra một phương pháp có thể được sử dụng để tính giá trị opacity màu bằng tay:

// caculateTransparentColor(foreground, background, opacity) 
var theColor = caculateTransparentColor('#ff0000', '#00ff00', 0.5) 
console.log(theColor); 
Returns: #808000 

Code:

var COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/; 
function colorHexToRGB(htmlColor) { 

    arrRGB = htmlColor.match(COLOR_REGEX); 
    if (arrRGB == null) { 
     alert("Invalid color passed, the color should be in the html format. Example: #ff0033"); 
    } 
    var red = parseInt(arrRGB[1], 16); 
    var green = parseInt(arrRGB[2], 16); 
    var blue = parseInt(arrRGB[3], 16); 
    return {"r":red, "g":green, "b":blue}; 
} 

function caculateTransparentColor(foregroundColor, backgroundColor, opacity) { 
    if (opacity < 0.0 || opacity > 1.0) { 
     alert("assertion, opacity should be between 0 and 1"); 
    } 
    opacity = opacity * 1.0; // to make it float 
    var foregroundRGB = colorHexToRGB(foregroundColor); 
    var backgroundRGB = colorHexToRGB(backgroundColor); 
    var finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity); 
    var finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity); 
    var finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity); 
    return colorRGBToHex(finalRed, finalGreen, finalBlue); 
} 

function colorRGBToHex(red, green, blue) { 
    if (red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255) { 
     alert("Invalid color value passed. Should be between 0 and 255."); 
    } 
    var formatHex = function(value) { 
     value = value + ""; 
     if (value.length == 1) { 
      return "0" + value; 
     } 
     return value; 
    } 
    hexRed = formatHex(red.toString(16)); 
    hexGreen = formatHex(green.toString(16)); 
    hexBlue = formatHex(blue.toString(16)); 

    return "#" + hexRed + hexGreen + hexBlue; 
} 

Answer 3

Formula cho quả trộn hai điểm ảnh trong suốt:

C1 = [R1, G1, B1] là màu điểm ảnh nền trước.

C2 = [R2, G2, B2] là màu pixel nền.

p1 là phần trăm độ mờ của pixel nền trước.

p2 là phần trăm độ mờ của pixel nền.

New_Pixel_Color = (p1 * c1 + p2 * c2-p1 * c2 p2 *)/(p1 + p2-p1 * p2)

New_Pixel_opacity = p1 + p2-p1 * p2

Bạn có thể kiểm tra và tận hưởng nó!