• 【動機】

   之前看到一款卡牌遊戲，當你要看全屏高清卡牌的時候，遊戲會單獨從網路上下載，本地只存了非高清的，這樣可以省點包大小，所以我萌生了實現一個讀取網路圖片的類。

• 【聯想】

之前瀏覽網頁的時候經常看到一張圖片漸進(由模糊變清晰)的顯示，如果在遊戲中，諸如像顯示高清卡牌的時候，使用有這種方式去顯示一張圖片，這樣的體驗應該會稍微好些

• 【相關知識】

　　png interlaced：png圖片在匯出的時候是可以選擇 interlaced (Adam7)的，這樣的儲存的png在網頁上顯示會漸進顯示，

      這種interlaced方式是由adam 開發的，分為7段掃描，具體方式如下面的gif圖

      jpg progressive：在web瀏覽器上很多都是使用這種模式的圖片

• 【png解碼】

   cocos2d-x沒有對interlaced模式進行支援，libpng本身肯定是支援的，對interlaced圖片png必須使用png_progressive_combine_row來逐行讀取，非interlaced的png圖片也是一樣支援的，libpng解析，首先我們要初始化png_structp,所有解析的資訊都在這個結構體裡

bool PNGCodec::PrepareDecode() {
  png_reader_.png_struct_ptr_= png_create_read_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL);
  if (!png_reader_.png_struct_ptr_)
    return false;
  
  png_reader_.png_info_ptr_ = png_create_info_struct(png_reader_.png_struct_ptr_);
  if (!png_reader_.png_info_ptr_) {
    png_destroy_read_struct(
 
&png_reader_.png_struct_ptr_, NULL, NULL);
    return false;
  }

  if (setjmp(png_jmpbuf(png_reader_.png_struct_ptr_))) {
    png_destroy_read_struct(&png_reader_.png_struct_ptr_, &png_reader_.png_info_ptr_, (png_infopp)NULL);
    return false;
  }
  
  png_set_error_fn(png_reader_.png_struct_ptr_, NULL, LogLibPNGDecodeError, LogLibPNGDecodeWarning);
  
  png_set_progressive_read_fn(png_reader_.png_struct_ptr_, &png_reader_, &DecodeInfoCallback,
                              &DecodeRowCallback, &DecodeEndCallback);
  png_reader_.decode_state_ = PNGCodec::DecodeState::DECODE_READY;
  return true;
}

這裡主要是png_set_progressive_read_fn 函式，通過設定回撥方式，第3個引數是讀完png_info(png頭)的回撥，第4個引數row讀入的回撥，第5個引數是解析結束的的回撥

有這些回撥函式，我們設定回撥函式，通過回撥函式來更新sprite的texture

/*
@parm1：png_structp
@parm2：自定義指標
@parm3：void *png_progressive_info_ptr(png_struct* png_ptr, png_info* info_ptr)
@parm4：void *png_progressive_row_ptr(png_struct* png_ptr, png_byte* new_row, png_uint_32 row_num, int pass)
@parm5：void png_progressive_end_ptr(png_struct* png_ptr, png_info* info)
*/
void, png_set_progressive_read_fn(png_structrp png_ptr, png_voidp progressive_ptr, png_progressive_info_ptr info_fn,
    png_progressive_row_ptr row_fn, png_progressive_end_ptr end_fn))

• 【思路】

  載入網路圖片首先從網下下載png資料，通過curl把資料送給png解析，通過png的回撥來更新sprite的textrue，把下載和解析放在一個執行緒裡做，這樣就不會阻塞了

 我實現了四個類

PNGCoder:主要完成對png圖片的解析

HttpConnection:對curl的封裝

CCInterlacedImage:用於快取png解析後的資料

WebSprite: 主要提供initWithFileUrl介面，

使用者通過建立一個websprite:initWithFileUrl，並websprite加到scene中，由websprite來建立執行緒和建立httpconneciton，

• 【碰到的問題】

1.如何執行緒通訊：之前使用boost庫的時候，boost 實現io_sevice，可以通過boost::asio io_service, io_sevice實際上是一個function佇列，他是執行緒安全的，

c++11我沒找到，所以我在websprite也建立了這樣的一個佇列，但是要自己去處理這個佇列的執行緒安全，這個可以通過鎖來實現

2.如何終止執行緒：當我們釋放websprite，執行緒屬於分離狀態，執行緒無法強轉終止，std:thread沒有提供相關介面，curl_easy_perform是阻塞的，當你要釋放websprite的時候，這個時候執行緒還在跑，怎麼終止 curl可以通過size_twriteData(void*ptr,size_tsize,size_tnmemb,void*stream) 的返回0時，curl_easy_perform會終止返回錯誤，

3.如何處理記憶體釋放的問題：因為這是跨執行緒的，資料的安全釋放就要變得尤為小心，因為我的通常你可能需要設定某個標誌位在兩個執行緒間來通知相關指標是否已經失效，使用共享指標執行緒之間的記憶體釋放問題可以很好的解決了，你不需要去關心這個問題，引用計數來解決這個問題，std:shared_ptr的引用計數是執行緒安全的

• 【效果圖】

這是在瀏覽

http://daltonclaybrook.com/future.png

• 【程式碼】

#include "CCWebSprite.h"
#include "CCInterlacedPngImage.h"
#include "http_connection.h"
#include "png_codec.h"

#include <future>

namespace cocos2d {


      // Callback function used by libcurl for collect response data
size_t WebSprite::DataBridge::WriteData(void *ptr, size_t size, size_t nmemb, void *stream) {
  if (stream == nullptr) {
        return 0;
  }
  WebSprite* web_sprite = static_cast<WebSprite*>(stream);
    if (web_sprite == nullptr) {
        return 0;
    }
  size_t sizes = size * nmemb;
  web_sprite->reciverData((unsigned  char*)ptr, sizes);
  return sizes;
}

void WebSprite::DataBridge::ReadHeaderCompleteCallBack(void* ptr) {
    WebSprite* web_sprite = static_cast<WebSprite*>(ptr);
    web_sprite->readHeaderComplete();
}

void WebSprite::DataBridge::ReadRowCompleteCallBack(void* ptr, int pass) {
  WebSprite* web_sprite = static_cast<WebSprite*>(ptr);
  web_sprite->readRowComplete(pass);
}

void WebSprite::DataBridge::ReadAllCompleteCallBack(void* ptr) {
  WebSprite* web_sprite = static_cast<WebSprite*>(ptr);
  web_sprite->readAllComplete();
}


WebSprite::WebSprite() : http_connection_(nullptr),
    png_coder_(std::make_shared<util::PNGCodec>()), interlaced_png_image_buff_(new InterlacedPngImage()), code_pass_(-1){

}

WebSprite::~WebSprite() {
    if (http_connection_ != nullptr) {
        http_connection_->SetWriteCallBack(nullptr, WebSprite::DataBridge::WriteData);
    }
    png_coder_->SetReadCallBack(nullptr, nullptr, nullptr, nullptr);
    CC_SAFE_RELEASE(interlaced_png_image_buff_);
}

WebSprite* WebSprite::create() {
  WebSprite *sprite = new WebSprite();
  if (sprite && sprite->init())
  {
    sprite->autorelease();
    return sprite;
  }
  CC_SAFE_DELETE(sprite);
  return nullptr;
}

WebSprite* WebSprite::createWithFileUrl(const char *file_url) {
  WebSprite *sprite = new WebSprite();
  if (sprite && sprite->initWithFileUrl(file_url))
  {
    sprite->autorelease();
    return sprite;
  }
  CC_SAFE_DELETE(sprite);
  return nullptr;
}

bool WebSprite::initWithFileUrl(const char *file_url) {
  Sprite::init();
  file_url_ = file_url;
    if (isRemotoeFileUrl(file_url)) {
        return initWithRemoteFile();
    } else {
        return initWithLocalFile();
    }
}

bool WebSprite::initWithRemoteFile() {
    assert(http_connection_ == nullptr);
    http_connection_ = std::make_shared<HttpConnection>();
    http_connection_->Init(file_url_.c_str());
    png_coder_->PrepareDecode();
    png_coder_->SetReadCallBack(this, WebSprite::DataBridge::ReadHeaderCompleteCallBack, WebSprite::DataBridge::ReadRowCompleteCallBack, WebSprite::DataBridge::ReadAllCompleteCallBack);
    http_connection_->SetWriteCallBack(this, WebSprite::DataBridge::WriteData);
    this->scheduleUpdate();
    std::thread http_thread = std::thread(std::bind(&HttpConnection::PerformGet, http_connection_));
    http_thread.detach();
    return true;
}

bool WebSprite::initWithLocalFile() {
    auto filePath = FileUtils::getInstance()->fullPathForFilename(file_url_);
    std::shared_ptr<Data> data = std::make_shared<Data>(FileUtils::getInstance()->getDataFromFile(filePath));
    png_coder_->PrepareDecode();
    png_coder_->SetReadCallBack(this, &WebSprite::DataBridge::ReadHeaderCompleteCallBack, WebSprite::DataBridge::ReadRowCompleteCallBack, WebSprite::DataBridge::ReadAllCompleteCallBack);
    std::thread http_thread = std::thread(std::bind([=](){
                png_coder_->Decoding(data->getBytes(), data->getSize());
            }
        ));
    http_thread.detach();
    this->scheduleUpdate();
    return true;
}

bool WebSprite::isRemotoeFileUrl(const char *file_url) {
    if (strlen(file_url) > 7 && (strncmp(file_url, "http://", 7) == 0)) {
        return true;
    }
    return false;
}

void WebSprite::reciverData(unsigned char* data, size_t data_size) {
    png_coder_->Decoding(data, data_size);
}

void WebSprite::updateTexture() {
  cocos2d::Texture2D* texture = cocos2d::Director::getInstance()->getTextureCache()->addImage(interlaced_png_image_buff_, file_url_);
    texture->updateWithData(interlaced_png_image_buff_->getData(), 0, 0, interlaced_png_image_buff_->getWidth(),
                interlaced_png_image_buff_->getHeight());
    SpriteFrame* sprite_frame = cocos2d::SpriteFrame::createWithTexture(texture,
            CCRectMake(0,0,texture->getContentSize().width, texture->getContentSize().height));
    Sprite::setSpriteFrame(sprite_frame);
}

void WebSprite::readHeaderComplete() {
    interlaced_png_image_buff_->setImageHeader(png_coder_->png_width(), png_coder_->png_height(), png_coder_->png_color_type(), png_coder_->png_output_channels());
}

void WebSprite::readRowComplete(int pass) {
  if (code_pass_ < pass) {
    perform_mutex_.lock();
        interlaced_png_image_buff_->setImageBodyData((char*)png_coder_->png_data_buffer(), png_coder_->png_data_size());
    perform_main_thread_functions_.push_back(std::bind(&WebSprite::updateTexture, this));
    perform_mutex_.unlock();
    code_pass_ = pass;
  }
}

// run on sub thread
void WebSprite::readAllComplete() {
  perform_mutex_.lock();
    interlaced_png_image_buff_->setImageBodyData((char*)png_coder_->png_data_buffer(), png_coder_->png_data_size());
  perform_main_thread_functions_.push_back(std::bind(&WebSprite::updateTexture, this));
  perform_mutex_.unlock();
}

void WebSprite::update(float fDelta) {
  Sprite::update(fDelta);
  perform_mutex_.lock();
  for (std::vector<std::function<void ()> >::iterator it = perform_main_thread_functions_.begin();
       it != perform_main_thread_functions_.end(); ++it) {
    (*it)();
  } 
  perform_main_thread_functions_.clear();
  perform_mutex_.unlock();
}
  

這是在cocos2d3.0基礎上開發的，把下面的檔案替換掉ccp-empty-test，就可以了

• 【參考】

1.https://github.com/daltonclaybrook/SFSInterlacedImageView

2.https://code.google.com/p/chromium/codesearch#chromium/src/ui/gfx/codec/png_codec.h&q=png_code&sq=package:chromium&l=1