js怎么自定義隨機驗證碼控件

本篇內(nèi)容介紹了“js怎么自定義隨機驗證碼控件”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為靖西等服務(wù)建站，靖西等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為靖西企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

隨機獲取要展示的字符串，然后以不規(guī)則的形式繪制出來，添加一些干擾因素，例如干擾線、噪點等。

1：首先想到的就是實現(xiàn)一個自定義View,在其onDraw()中繪制，但是此方式會遇到一個比較棘手的問題。

當鍵盤彈出與收回時，會觸發(fā)自定義View的onDraw()方法，那樣就會重繪一次，造成位置變動。

解決辦法：

我能想到的解決辦法就是類似于打快照的辦法。在每次繪制后就將其現(xiàn)有信息保存起來，使被動觸發(fā)的onDraw()均使用快照，而只有我們主動刷新時再重新設(shè)置繪制信息。

2：不使用自定義View，而是生成一張圖片，設(shè)置到ImageView中，這樣就避免了自定義View的問題。

實現(xiàn)方式

下面是完整的代碼，主要關(guān)注兩個接口方法：

createCodeImage()：創(chuàng)建隨機驗證碼圖片

getCode() ：獲取當前驗證碼

public class RandomVerifyCode {
    private static final char[] CHARS = {
            '0','1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'm',
            'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
            'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    };
    private Context mContext;
    private ImageView imgContainer;
    private int textCount;
    private int lineCount;
    private float textSize;
    private int width = 100, height = 40;
    private String code;
    private Random random = new Random();
    private Paint paint = new Paint();
    public RandomVerifyCode(Context context, @NonNull ImageView imgContainer, int textCount, int lineCount, float textSizeDp) {
        this.mContext = context;
        this.textCount = textCount;
        this.lineCount = lineCount;
        this.textSize = CommonUtils.dp2px(mContext, textSizeDp);
        this.imgContainer = imgContainer;
        imgContainer.setOnClickListener(v -> {
            createCodeImage();
        });
        paint.setAntiAlias(true);
        paint.setTextSize(textSize);
    }
    public void createCodeImage() {
        code = createCode();
        imgContainer.post(() -> {
            width = imgContainer.getWidth();
            height = imgContainer.getHeight();
            Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            int tenDp = CommonUtils.dp2px(mContext, 10);
            int dx = tenDp;
            for (int i = 0; i < textCount; i++) {
                randomTextStyle(paint);
                canvas.drawText(code.charAt(i) + "", dx, getDrawY(height, CommonUtils.dp2px(mContext, 3),
                        (int) textSize), paint);
                dx += (width - tenDp * 2) / textCount;
            }
            for (int i = 0; i < lineCount; i++) {
                drawLine(canvas, paint);
            }
            canvas.save();
            canvas.restore();
            imgContainer.setImageBitmap(bitmap);
        });
    }
    public String getCode() {
        if (TextUtils.isEmpty(code))
            throw  new UnsupportedOperationException("請先調(diào)用createCodeImage()方法");
        return code;
    }
    //隨機生成文字樣式，顏色，粗細，傾斜度
    private void randomTextStyle(Paint paint) {
        int color = Color.rgb(255, 255, 255);
        paint.setColor(color);
        paint.setFakeBoldText(random.nextBoolean());  //true為粗體，false為非粗體
        float skewX = random.nextFloat();
        skewX = random.nextBoolean() ? skewX : -skewX;
        paint.setTextSkewX(skewX); //float類型參數(shù)，負數(shù)表示右斜，正數(shù)左斜
    }
    private void drawLine(Canvas canvas, Paint paint) {
        int color = randomColor(1);
        int startX = random.nextInt(width);
        int startY = random.nextInt(height);
        int stopX = random.nextInt(width);
        int stopY = random.nextInt(height);
        paint.setStrokeWidth(3);
        paint.setColor(color);
        canvas.drawLine(startX, startY, stopX, stopY, paint);
    }
    private int randomColor(int rate) {
        int red = random.nextInt(256) / rate;
        int green = random.nextInt(256) / rate;
        int blue = random.nextInt(256) / rate;
        return Color.rgb(red, green, blue);
    }
    private String createCode() {
        StringBuilder buffer = new StringBuilder();
        for (int i = 0; i < textCount; i++) {
            buffer.append(CHARS[random.nextInt(CHARS.length)]);
        }
        return buffer.toString();
    }
    private int getDrawY(int height, int offsetY, int textHeight) {
        double tempY = Math.random() * (height - textHeight - offsetY * 2) + textHeight;
        return (int) tempY;
    }
}

如何使用

在需要展示驗證碼的地方放一個ImageView控件，設(shè)置其背景色，大小等。然后調(diào)用相關(guān)方法即可，如下所示。

public class MainActivity extends AppCompatActivity {
    private RandomVerifyCode verifyCode;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView codeImg = findViewById(R.id.iv_verify_code);
        verifyCode = new RandomVerifyCode(this, codeImg, 4, 5, 25);
        verifyCode.createCodeImage();
    }
}

改進

本類有非常多可以改進的地方，有興趣的同學(xué)可以嘗試：

驗證碼的顏色是固定為白色，可以改進為可配置。

現(xiàn)在只有干擾線，可以嘗試添加噪點

干擾線寬度不能配置

驗證碼數(shù)據(jù)源不能配置，現(xiàn)在為0到9，小寫字母與大寫字母，如果遇到純數(shù)字或純字母等需求，需要修改源代碼。

如果改了以上幾條，最好考慮使用Builder模式重構(gòu)此類。

“js怎么自定義隨機驗證碼控件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文名稱：js怎么自定義隨機驗證碼控件
網(wǎng)站路徑：http://muchs.cn/article38/jpeisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)、小程序開發(fā)、自適應(yīng)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作