### **前言**

在一次專案開發中，需要對滑動拼圖驗證碼的寬高、拼圖缺口、滑塊等樣式進行自定義設定，於是我找啊找，終於讓我找到了 **KgCaptcha**，使用者可以自己設定驗證碼尺寸、外框、缺口樣式、滑塊等。下面就由我來介紹一下如何設定吧！

### **01 圖片寬度**

驗證碼的圖片寬度，必須與滑動框同步寬度、同步修改，單位 px。

![](http://img.blog.itpub.net/blog/2023/04/21/c258e2ac37e6893b.jpeg?x-oss-process=style/bb)

效果如下：

![](http://img.blog.itpub.net/blog/2023/04/21/a7f7b9f06714e44f.jpeg?x-oss-process=style/bb)

### **02 圖片高度**

驗證碼的底圖高度，單位 px。

![](http://img.blog.itpub.net/blog/2023/04/21/39033e40895a488b.jpeg?x-oss-process=style/bb)

效果如下：

![](http://img.blog.itpub.net/blog/2023/04/21/86bb2397cda69197.jpeg?x-oss-process=style/bb)

### **03 圖片圓角邊框**

設定底圖邊框圓角，單位 px

![](http://img.blog.itpub.net/blog/2023/04/21/57861c3ab856d449.jpeg?x-oss-process=style/bb)

效果如下：

![](http://img.blog.itpub.net/blog/2023/04/21/2e62bc27f9529850.jpeg?x-oss-process=style/bb)

### **04 小方塊旋轉角度**

驗證碼拼圖缺口的旋轉角度——不旋轉 / 正角旋轉 / 隨機角度

![](http://img.blog.itpub.net/blog/2023/04/21/c28f90952b02b020.jpeg?x-oss-process=style/bb)

正角旋轉：45|90|180|360 度旋轉，圖案比較美觀，體驗度好

![](http://img.blog.itpub.net/blog/2023/04/21/96ca45a31acc6c76.jpeg?x-oss-process=style/bb)

隨機角度：隨機旋轉，體驗一般，防禦力較強

![](http://img.blog.itpub.net/blog/2023/04/21/791117f7cd86d98e.jpeg?x-oss-process=style/bb)

### **05 小方塊透明度**

設定拼圖小方塊透明度，範圍0-1

![](http://img.blog.itpub.net/blog/2023/04/21/0832fd1d235b128c.jpeg?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/04/21/87793baefe82fa3a.jpeg?x-oss-process=style/bb)

### **06 小方塊形狀**

普通模式：拼圖小方塊使用標準形狀

![](http://img.blog.itpub.net/blog/2023/04/21/bf5cd6ca264197ac.jpeg?x-oss-process=style/bb)

隨機模式：拼圖小方塊使用隨機形狀

![](http://img.blog.itpub.net/blog/2023/04/21/c8cdc41df113d054.jpeg?x-oss-process=style/bb)

### **07 拼圖容錯值**

設定拼圖容錯範圍，單位 px

![](http://img.blog.itpub.net/blog/2023/04/21/f901f014c8793e96.jpeg?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/04/21/93f8e179e3006845.jpeg?x-oss-process=style/bb)

### **相關連結**

SDK下載：[https://github.com/KgCaptcha](https://github.com/KgCaptcha)

線上體驗：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

圖形驗證碼圖片樣式設定

相關文章