您好,登錄后才能下訂單哦!
一、概述
近期群里偶然看到一哥們?cè)谌豪锪牟灰?guī)則圖像填充什么四聯(lián)通、八聯(lián)通什么的,就本身好學(xué)務(wù)實(shí)的態(tài)度去查閱了相關(guān)資料。對(duì)于這類著色的資料,最好的就是去搜索些相關(guān)app,根據(jù)我的觀察呢,不規(guī)則圖像填充在著色游戲里面應(yīng)用居多,不過(guò)大致可以分為兩種:
基于層的的填充
基于邊界的填充
那么針對(duì)上述兩種,我們會(huì)通過(guò)兩篇博文來(lái)講解,本篇就是敘述基于層的填充方式,那么什么基于層的填充方式呢?其實(shí)就是一張圖實(shí)際上是由多個(gè)層組成的,每個(gè)層顯示部分圖像(無(wú)圖像部分為透明),多層疊加后形成一張完整的圖案,圖層間是疊加的關(guān)系,類似下圖。
相信大家如果學(xué)過(guò)PS,對(duì)上述肯定再了解不過(guò)了。比如你要繪制一個(gè)天空,你可以最底層去繪制藍(lán)天,在上層繪制白云,再上層會(huì)執(zhí)行小鳥(niǎo)。然后三層疊加以后就是一副小鳥(niǎo)在天空翱翔的圖了。
二、效果與分析
好了,接下來(lái)看下今天的效果。
ok,可以看到一個(gè)簡(jiǎn)單的著色效果,其實(shí)原理很簡(jiǎn)單,首先呢,該圖實(shí)際上是由7層組成:
例如下圖。
那么如果我們需要給這幅圖的某個(gè)位置著色,實(shí)際上是給某一層的非透明區(qū)域著色。實(shí)際上就轉(zhuǎn)化為:
用戶點(diǎn)擊的(x,y)-> 判斷落在哪一層的非透明區(qū)域 -> 然后給該層非透明區(qū)域著色。
ok,這樣原理就敘述清楚了,實(shí)際上也是非常的簡(jiǎn)單,基于該原理,我們可以自定義一個(gè)View,然后一幅一幅去繪制圖層,最后按照上述步驟去編寫(xiě)代碼。不過(guò),我們還有可以偷懶的地方,其實(shí)沒(méi)必要我們自己去一個(gè)圖層一個(gè)圖層的繪制,我們可以利用Drawable去完成圖層疊加的工作,我們有一類Drawable叫做LayerDrawable,對(duì)應(yīng)的xml為layer-list,我們可以通過(guò)使用LayerDrawable
極大的簡(jiǎn)化我們的工作。
三、編碼與實(shí)現(xiàn)
上述已經(jīng)描述很清楚了,我再給大家細(xì)化一下:
1.layer-list中去定義我們的drawable;
2.然后把該drawable作為我們View的背景;
3.復(fù)寫(xiě)onTouchEvent方法;
4.判斷用戶點(diǎn)擊的坐標(biāo)落在哪一層的非透明位置,改變?cè)搶臃峭该鲄^(qū)域顏色。
(一)layer-list
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/eel_mask1"/> <item android:drawable="@drawable/eel_mask2"/> <item android:drawable="@drawable/eel_mask3"/> <item android:drawable="@drawable/eel_mask4"/> <item android:drawable="@drawable/eel_mask5"/> <item android:drawable="@drawable/eel_mask6"/> <item android:drawable="@drawable/eel_mask7"/> </layer-list>
ok,這樣我們的drawable就ok了~~沒(méi)撒說(shuō)的,不過(guò)layer-list可以做很多事情,大家可以關(guān)注下。
(二)View代碼
package com.zhy.colour_app_01; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Color; import android.graphics.PorterDuff; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.LayerDrawable; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import java.util.Random; /** * Created by zhy on 15/5/14. */ public class ColourImageBaseLayerView extends View { private LayerDrawable mDrawables; public ColourImageBaseLayerView(Context context, AttributeSet attrs) { super(context, attrs); mDrawables = (LayerDrawable) getBackground(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(mDrawables.getIntrinsicWidth(), mDrawables.getIntrinsicHeight()); } @Override public boolean onTouchEvent(MotionEvent event) { final float x = event.getX(); final float y = event.getY(); if (event.getAction() == MotionEvent.ACTION_DOWN) { Drawable drawable = findDrawable(x, y); if (drawable != null) drawable.setColorFilter(randomColor(), PorterDuff.Mode.SRC_IN); } return super.onTouchEvent(event); } private int randomColor() { Random random = new Random(); int color = Color.argb(255, random.nextInt(256), random.nextInt(256), random.nextInt(256)); return color; } private Drawable findDrawable(float x, float y) { final int numberOfLayers = mDrawables.getNumberOfLayers(); Drawable drawable = null; Bitmap bitmap = null; for (int i = numberOfLayers - 1; i >= 0; i--) { drawable = mDrawables.getDrawable(i); bitmap = ((BitmapDrawable) drawable).getBitmap(); try { int pixel = bitmap.getPixel((int) x, (int) y); if (pixel == Color.TRANSPARENT) { continue; } } catch (Exception e) { continue; } return drawable; } return null; } }
ok,代碼也比較簡(jiǎn)單,首先我們把drawable作為view的背景,然后在構(gòu)造中獲取drawable(LayerDrawable)。接下來(lái)復(fù)寫(xiě)onTouchEvent,捕獲用戶點(diǎn)擊的(x,y),根據(jù)(x,y)去找出當(dāng)前點(diǎn)擊的是哪一層(必須點(diǎn)擊在非透明區(qū)域),最后通過(guò)設(shè)置setColorFilter去改變顏色即可~很easy吧最后貼下布局文件:
(三)布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.zhy.colour_app_01.ColourImageBaseLayerView android:background="@drawable/eel" android:layout_width="match_parent" android:layout_centerInParent="true" android:layout_height="match_parent"/> </RelativeLayout>
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。