2. 程式人生 > >Alpha顏色混合的魔法 上篇

Alpha顏色混合的魔法 上篇

阿新 • • 發佈：2019-01-24

摘要：本系列文章介紹了一種在影象處理、2D遊戲、3D遊戲中經常使用的圖片混合模型:Alpha顏色混合;
它就像神奇的魔法一樣，在電腦螢幕上給我們展現出一個個絢麗多彩的世界!

全文 分為: 上篇 各種Alpha顏色混合方式
          下篇 其他一些顏色混合方案、補充

tag:Alpha,Blend,透明,顏色混合,顏色混合公式

正文： 
  為了便於討論，這裡只處理32bit的ARGB顏色；
  程式碼使用C++,編譯器:VC2005

  (文章中的效果圖片都是用給出的例子程式碼實際生成)  

A: 一些顏色和圖片的資料定義:

#define asm __asm

typedef unsigned 
char TUInt8; // [0..255]struct TARGB32      //32 bit color{
    TUInt8  b,g,r,a;          //a is alpha};

struct TPicRegion  //一塊顏色資料區的描述，便於引數傳遞{
    TARGB32*    pdata;         //顏色資料首地址long        byte_width;    //一行資料的物理寬度(位元組寬度)；
                //abs(byte_width)有可能大於等於width*sizeof(TARGB32);long        width;         
//畫素寬度long        height;        //畫素高度};

//那麼訪問一個點的函式可以寫為：inline TARGB32& Pixels(const TPicRegion& pic,constlong x,constlong y)
{
    return ( (TARGB32*)((TUInt8*)pic.pdata+pic.byte_width*y) )[x];
}

B: 混合兩幅圖片
  這裡簡單的按照50%的比例混合兩幅圖片；演算法也很簡單，就是將顏色分量直接
相加，然後取平均值；函式如下:

void PicBlend_half(const TPicRegion&
 picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=(DstColor.b + SrcColor.b)/2;
            DstColor.g=(DstColor.g + SrcColor.g)/2;
            DstColor.r=(DstColor.r + SrcColor.r)/2;
            DstColor.a=(DstColor.a + SrcColor.a)/2;
        }
    }
}

函式效果:

           

             混合前源圖片0                             混合前源圖片1

                        

                          PicBlend_half混合後的結果圖片

C.按比例混合兩幅圖片
  我們來增強PicBlend_half的混合能力,允許指定兩幅圖片的混合比例(引數Alpha)；
  Alpha屬於[0..255],當Alpha=127的時候與PicBlend_half等價(小的誤差不算:)
  Alpha顏色混合公式：Dst=( Src0*(255-Alpha) + Src1*Alpha ) / 255;

void PicBlend_Alpha(const TPicRegion& picDst,const TPicRegion& picSrc,TUInt8 Alpha)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=(DstColor.b*(255-Alpha) + SrcColor.b*Alpha)/255;
            DstColor.g=(DstColor.g*(255-Alpha) + SrcColor.g*Alpha)/255;
            DstColor.r=(DstColor.r*(255-Alpha) + SrcColor.r*Alpha)/255;
            DstColor.a=(DstColor.a*(255-Alpha) + SrcColor.a*Alpha)/255;
        }
    }
}

 
提示: 利用兩幅圖片然後不斷的調整Alpha混合引數就可以得到漂亮的
動畫效果(過渡/切換螢幕等)；

函式效果:
           

           
          Alpha=64時混合後的結果圖片             Alpha=192時混合後的結果圖片


D.帶關鍵色的圖片合成
  圖片中用一種特殊的顏色來代表圖片透明的部分，這個關鍵色一般會選擇圖片中實際沒
有用到的顏色；程式在顯示圖片的時候跳過這些特殊畫素，從而形成透明效果；
  GIF的透明、很多遊戲中的透明貼圖都應用了這種原理；
  比如一幅帶有透明關鍵色的圖片:
              

  該圖片中的關鍵色顏色為純紅色,R=255;G=0;B=0;

  函式實現:

void PicBlend_KeyColor(const TPicRegion& picDst,const TPicRegion& picSrc,const TARGB32& KeyColor)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    unsigned long KeyColorValue=(*(unsigned long*)&KeyColor) &0x00FFFFFF;
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32  SrcColor=Pixels(picSrc,x,y);
            if ( ( (*(unsigned long*)&SrcColor) &0x00FFFFFF )!=KeyColorValue )
                Pixels(picDst,x,y)=SrcColor;
        }
    }
}

函式效果:

          
            PicBlend_KeyColor函式效果圖

提示:有時為了方便也可以將一個顏色範圍內的顏色都作為透明關鍵色；

一個支援換裝人物系統簡單示例:
                  
              身體           頭           髮型 

                        

          按 底、身體、頭、髮型 的順序混合後的效果圖


E.帶Alpha通道的圖片的混合
  PicBlend_KeyColor的實現方式有一些缺點，比如美工做圖片的時候需要"摳邊"
(將透明區域和不透明區域分離)，增加了工作量；合成的圖片在“精靈”的邊界區域
有鋸齒感(如果有縮放的話,鋸齒感會更強)；我們需要一種更加自由的定義方式，
每個顏色增加一個專門的通道Alpha通道來描述該畫素的透明資訊；
  Alpha屬於[0..255],
  帶Alpha通道的顏色混合公式：Dst=( Dst*(255-Src.Alpha) + Src*Src.Alpha ) / 255;
  (提示:  當Alpha==0時，  公式化簡為: Dst=Dst; //Src完全透明
          當Alpha==255時，公式化簡為: Dst=Src; //Src完全不透明  )

void PicBlend(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);
            unsigned long Alpha=SrcColor.a;

            DstColor.b=(DstColor.b*(255-Alpha) + SrcColor.b*Alpha)/255;
            DstColor.g=(DstColor.g*(255-Alpha) + SrcColor.g*Alpha)/255;
            DstColor.r=(DstColor.r*(255-Alpha) + SrcColor.r*Alpha)/255;
            DstColor.a=(DstColor.a*(255-Alpha) + SrcColor.a*Alpha)/255;
        }
    }
}

函式效果:

                        

            混合前源圖片0           混合前源圖片1(32bit ARGB顏色)  其中透明通道展示

                    
     PicBlend混合後的結果圖片(注意精靈的輪廓線,與背景完美的融合在了一起)


F.顏色混合方案:加
  有時候，直接把兩幅圖片顏色值相加也能得到很不錯的效果；
比如在實現一些光照特效、太陽引起的鏡頭光暈等效果的時候就很不錯；
（顏色相加時可能會超出255的值域，需要把結果飽和到255）

    inline long border_color_up(long color)
    {
        if (color>=255)
            return255;
        elsereturn color;
    }
void PicBlend_Add(const TPicRegion& picDst,const TPicRegion& picSrc)
{
    long width =min(picDst.width ,picSrc.width );
    long height=min(picDst.height,picSrc.height);
    for (long y=0;y<height;++y)
    {
        for (long x=0;x<width;++x)
        {
            TARGB32& DstColor=Pixels(picDst,x,y);
            TARGB32  SrcColor=Pixels(picSrc,x,y);

            DstColor.b=border_color_up(DstColor.b + SrcColor.b);
            DstColor.g=border_color_up(DstColor.g + SrcColor.g);
            DstColor.r=border_color_up(DstColor.r + SrcColor.r);
            DstColor.a=border_color_up(DstColor.a + SrcColor.a);
        }
    }
}

函式效果:

                
                混合前源圖片0                  混合前源圖片1

                  
                      PicBlend_Add混合後的結果圖

相關推薦

Alpha顏色混合的魔法 上篇

摘要：本系列文章介紹了一種在影象處理、2D遊戲、3D遊戲中經常使用的圖片混合模型:Alpha顏色混合;它就像神奇的魔法一樣，在電腦螢幕上給我們展現出一個個絢麗多彩的世界! 全文 分為: 上篇 各種Al

Direct-X學習筆記--Alpha顏色混合

Alpha混合技術是灰常有用的東東。待我好好學習一下。 一.簡介 首先看一下Alpha通道，Alpha通道是計算機中儲存圖片透明度資訊的通道，它是一個8位灰度的通道，用256級灰度記錄影象中的透明資訊，定義透明，不透明，半透明等，其中黑色表示完全透明，白色表示不透明，灰色為

【MyBatis源碼分析】insert方法、update方法、delete方法處理流程（上篇）

times database connect 環境 enable clas 它的 java對象 ace 打開一個會話Session 前文分析了MyBatis將配置文件轉換為Java對象的流程，本文開始分析一下insert方法、update方法、delete方法處理的流程，至

編程經常使用設計模式具體解釋--（上篇）（工廠、單例、建造者、原型）

-a 裝飾器模式 nds support art 類的繼承 兩個 開放 lose 參考來自：http://zz563143188.iteye.com/blog/1847029 一、設計模式的分類 整體來說設計模式分為三大類： 創建型模式。共五種：工廠方法模式、抽

2017最新PHP經典面試題目匯總（上篇）

4.0 .net true 服務 一次 模板 混合 符號 組織 原文鏈接：http://www.cnblogs.com/zhyunfe/p/6209097.html 1、雙引號和單引號的區別 雙引號解釋變量，單引號不解釋變量 雙引號裏插入單引號，其中單引號裏如果有變量

Vue.js——組件快速入門（上篇）

綁定 ram 字符串過濾 技術 dem ava 對象 src get Vue.js——60分鐘組件快速入門（上篇） 組件簡介 組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件

iOS多線程開發之離不開的GCD（上篇）

sop 先進先出 調度 事件 實現 說明 優先級 子線程 函數 一、GCD基本概念 GCD 全稱Grand Central Dispatch(大中樞隊列調度)，是一套低層API,提供了?種新的方法來進?並發程序編寫。從基本功能上講，GCD有點像NSOperatio

支付網關 | 京東618、雙11用戶支付的核心承載系統（上篇）

java 支付 雙11 支付網關 618 二零一七年六月二十一日，就是年中大促剛結束的那一天，我午飯時間獨在辦公室裏徘徊，遇見X君，前來問我道，“可曾為這次大促寫了一點什麽沒有？”我說“沒有”。他就正告我，“還是寫一點罷；小夥伴們很想了解支撐起這麽大的用戶支付流量所采用的技術。”「摘要

Android圖文混排－實現EditText圖文混合插入上傳

origin uri keyword src llb fail ren -a amp 前段時間做了一個Android會議管理系統，項目需求涉及到EditText的圖文混排，如圖： 在上圖的”會議詳情”中。須要支持文本和圖片的混合插入，下圖演示輸入的

唐宇迪深度學習課程上篇——動手完成簡單的神經網絡

random 學習課程 div abs 特征值 唐宇迪 arr 神經網絡 簡單的 #coding:utf-8 ‘‘‘ Created on 2017年7月21日 @author: KLKJ ‘‘‘ import numpy as np def sigmoid(x,d

Andfix熱修復框架原理及源代碼解析-上篇

ren oid 聯系 pass 重命名 命名 key () 提示 熱補丁介紹及Andfix的使用 Andfix熱修復框架原理及源代碼解析-上篇 Andfix熱修復框架原理及源代碼解析-下篇 1.不知道怎樣使用的同學，建議看看我上一篇寫的介紹熱補丁和An

深入理解Git (三) － 微命令上篇

由於 obj 為什麽 info 進入 ng- net t對象 upd 1 git hash-object 曾經講過Git用Hash值作為Git對象的名字，那麽詳細是哪個命令呢？ 我們能夠先改動一個文件： echo "hongchangf

緊接著上篇文章，既然

sco style () back -c 自己 new spa sta 註意描述：一個是插入隊列（1是可以插入尾部eg一遍的序列尾部追加，2是可以插入中間eg優先隊列） 而移除的描素都是刪除頭部 import java.util.Comparator; impor

接上篇 checkbox數據的帶入

append his clas treelist inf n) cnblogs es2017 str 首先帶回回來的json數據 先轉換為樹形結構 才能方便之後遍歷 添加數據，這是一段遞歸把數據變為樹形結構的方法 // 把返回到LIST轉為樹形結構 function

Netty自娛自樂之類Dubbo RPC 框架設計構想 【上篇】

哈哈 ebe cte proc 文件 num one lex round 　　之前在前一篇的《Netty自娛自樂之協議棧設計》，菜鳥我已經自娛自樂了設計協議棧，gitHub地址為https://github.com/vOoT/ncustomer-protocal。先這一篇中

springboot 外部配置<上篇>

port 默認 -- cnblogs 應用 def less set man SpringBoot允許在外部進行配置，讓你在不同的環境中運行相同的代碼。你可以通過屬性文件、YAML文件、環境變量和命令行來進行外部配置。屬性值可以直接通過@Value註入，並可以通過Sprin

設A和B是兩個按元素值遞增有序的單鏈表，寫一算法將A和B歸並為按按元素值遞減有序的單鏈表C，試分析算法的時間復雜度。（利用上篇帶有頭結點的線性鏈表操作）

遞增 else 長度 初始化 get b- sizeof int insert #include <stdio.h>#include <malloc.h>typedef int DataType;#include "LinList.h" void

踢走絆腳石，MTU解析與常見問題匯總-上篇

mtu tcp-mss path mtu 金秋十月，在這國慶和中秋雙節之際，首先祝福大家雙節快樂。 今天讓我們來聊聊MTU的話題。相信無論網工還是程序員，都會多多少少的碰到過由MTU引發的問題，也往往對MTU值的選擇和計算頭疼不已。通常情況下，我們可以通過調整TCP-MSS值的大小，或者使用Pat

GoLang郵件發送Demo(繼上篇msmtp)

test div else ucc success println pre pla hub 　　GoLang越來越被看好，流行只是時間的問題了，閑暇時間玩玩Go。 　　下面是發送郵件的demo，替換自己的郵箱，完全可以正常跑起來，用的是net/smtp包： package

.net ef core 領域設計代碼轉換（上篇）

解決 con mage keys $1 服務 結構 刪除 sql 一、前言 .net core 2.0正式版已經發布幾個月了，經過研究，決定把項目轉移過來，新手的話可以先看一些官方介紹 傳送門：https://docs.microsoft.com/zh-cn/do