php使用gd库在图片中画圆角矩形

作者: Kaina_ | 来源:发表于2019-03-21 20:06 被阅读0次

最近需要在图片中画椭圆，但是gd库函数有矩形、圆弧、椭圆……就是没有圆角矩形
然后在网上找的画圆角矩形的方法试了一些，大都不好用
在找的过程中参考了别人的一些实现方法，于是我看着文档实现了一个自己的画圆角矩形

效果图

两个圆角矩形.png

核心代码

/**
     * 创建圆角矩形
     *
     * @param   [object]  $imageObj   [imagecreatefromjpeg() 返回一图像标识符]
     * @param   [int]  $arcRec_SX  [圆角矩形开始的X坐标]
     * @param   [int]  $arcRec_SY  [圆角矩形开始的Y坐标]
     * @param   [int]  $arcRec_EX  [圆角矩形结束的X坐标]
     * @param   [int]  $arcRec_EY  [圆角矩形结束的Y坐标]
     * @param   [int]  $redius     [圆角矩形的圆角弧度]
     * @param   []  $color      [php gd库里创建的颜色对象]
     *
     * @return  []              [没有返回值]
     */
    function arcRec($imageObj, $arcRec_SX, $arcRec_SY, $arcRec_EX, $arcRec_EY, $redius, $color)
    {
        // $arcRec_SX = 50;         //开始点X坐标
        // $arcRec_SY = 50;         //开始点Y坐标
        // $arcRec_EX = 500;       //结束点X坐标
        // $arcRec_EY = 500;       //结束点Y坐标
        // $redius = 50;           //圆角半径
        $arcRec_W = $arcRec_EX - $arcRec_SX;
        $arcRec_H = $arcRec_EY - $arcRec_SY;
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $color);        //矩形一
        imagefilledrectangle($imageObj, $arcRec_SX, $arcRec_SY + $redius, $arcRec_SX + $arcRec_W, $arcRec_SY + ($arcRec_H - ($redius * 1)), $color);//矩形二
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - ($redius * 1)), $arcRec_SX + ($arcRec_W - ($redius * 1)), $arcRec_SY + $arcRec_H, $color);//矩形三
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + $redius, $redius * 2, $redius * 2, 180, 270, $color, IMG_ARC_PIE);   //四分之一圆 - 左上
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $redius * 2, $redius * 2, 270, 360, $color, IMG_ARC_PIE);   //四分之一圆 - 右上
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 90, 180, $color, IMG_ARC_PIE);   //四分之一圆 - 左下
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 0, 90, $color, IMG_ARC_PIE);   //四分之一圆 - 右下
    }

实现原理

如图

用ps临时做的

把一个椭圆拆分为两种图形，这两种图形是gd库函数支持画的
分为矩形和椭圆弧（上下各两个，中间一个大的矩形，四角是椭圆弧）
这样只要我们计算好了每个点的位置和比例，就可以拼出一个圆角矩形了

实战

新建一个index.php文件，把test.jpg文件放到php文件的同级目录下（可以放在其他目录，这里是为了方便讲解），目录结构图大概这样

目录结构图
在index.php中写代码

<?
$imageFile = './test.jpg';                              //图片文件路径
$imageObj = imagecreatefromjpeg($imageFile);            //创建图像资源，返回标识符
$red = imagecolorallocate($imageObj, 255, 0, 0);            //定义颜色（红色
$blue = imagecolorallocate($imageObj, 0, 0, 255);       //定义颜色（蓝色
$white_tra = imagecolorallocatealpha($imageObj, 255, 255, 255, 30);        //定义颜色（白色）（不透明度：30[不透明度取值范围0 - 127，0：不透明，127：全透明]）

代码讲解：

因为我们操作的是jpg图片所以这里用imagecreatefromjpeg打开，如果操作png、bmp、webp可以用对应的函数（我只测试了操作jpg图片，其他的没有测试）
imagecolorallocate和imagecolorallocatealpha在文档中的解释是为图像分配颜色，并返回一个标识符
imagecolorallocatealpha是支持调整不透明度的
函数文档
imagecreatefromjpeg
imagecolorallocate
imagecolorallocatealpha

把核心代码放进来并调用

arcRec($imageObj, $arcRec_SX, $arcRec_SY, $arcRec_EX, $arcRec_EY, $redius, $color);

imageobj 这是在第二步中由imagecreatefromjpeg返回的标识符
arcRec_SX 这是圆角矩形左上角的X坐标
arcRec_SY 这是圆角矩形左上角的Y坐标
arcRec_EX 这是圆角矩形右下角X坐标
arcRec_EY 这是圆角矩形右下角的Y坐标
redius 这是圆角矩形的不透明度（取值范围 0 - 127，0：不透明 127：全透明）
color 这是第二步中用imagecolorallocate或者imagecolorallocatealpha创建图像颜色返回的标识符

最后把图像输出

imagepng($imageObj, 'uaivg.png');

最终的index.php文件的代码为

<?php

$imageFile = './test.jpg';                              //图片文件路径
$imageObj = imagecreatefromjpeg($imageFile);            //创建图像资源，返回标识符
$red = imagecolorallocate($imageObj, 255, 0, 0);            //定义颜色（红色
$blue = imagecolorallocate($imageObj, 0, 0, 255);       //定义颜色（蓝色
$white_tra = imagecolorallocatealpha($imageObj, 255, 255, 255, 30);        //定义颜色（白色）（不透明度：30[不透明度取值范围0 - 127，0：不透明，127：全透明]）
imagepng($imageObj, 'uaivg.png');
arcRec($imageObj, 100, 100, 150, 150, 5, $red);
arcRec($imageObj, 200, 200, 450, 350, 50, $blue);
imagepng($imageObj, 'uaivg.png');


/**
     * 创建圆角矩形
     *
     * @param   [object]  $imageObj   [imagecreatefromjpeg() 返回一图像标识符]
     * @param   [int]  $arcRec_SX  [圆角矩形开始的X坐标]
     * @param   [int]  $arcRec_SY  [圆角矩形开始的Y坐标]
     * @param   [int]  $arcRec_EX  [圆角矩形结束的X坐标]
     * @param   [int]  $arcRec_EY  [圆角矩形结束的Y坐标]
     * @param   [int]  $redius     [圆角矩形的圆角弧度]
     * @param   []  $color      [php gd库里创建的颜色对象]
     *
     * @return  []              [没有返回值]
     */
    function arcRec($imageObj, $arcRec_SX, $arcRec_SY, $arcRec_EX, $arcRec_EY, $redius, $color)
    {
        // $arcRec_SX = 50;         //开始点X坐标
        // $arcRec_SY = 50;         //开始点Y坐标
        // $arcRec_EX = 500;       //结束点X坐标
        // $arcRec_EY = 500;       //结束点Y坐标
        // $redius = 50;           //圆角半径
        $arcRec_W = $arcRec_EX - $arcRec_SX;
        $arcRec_H = $arcRec_EY - $arcRec_SY;
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $color);        //矩形一
        imagefilledrectangle($imageObj, $arcRec_SX, $arcRec_SY + $redius, $arcRec_SX + $arcRec_W, $arcRec_SY + ($arcRec_H - ($redius * 1)), $color);//矩形二
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - ($redius * 1)), $arcRec_SX + ($arcRec_W - ($redius * 1)), $arcRec_SY + $arcRec_H, $color);//矩形三
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + $redius, $redius * 2, $redius * 2, 180, 270, $color, IMG_ARC_PIE);   //四分之一圆 - 左上
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $redius * 2, $redius * 2, 270, 360, $color, IMG_ARC_PIE);   //四分之一圆 - 右上
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 90, 180, $color, IMG_ARC_PIE);   //四分之一圆 - 左下
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 0, 90, $color, IMG_ARC_PIE);   //四分之一圆 - 右下
    }

TIPS

核心代码中注释的代码是测试的时候写的
这篇文章中讲解的调用方法中的参数是传圆角矩形左上角和右下角的坐标
改一改代码可以改成传圆角矩形左上角的坐标和圆角矩形的宽高来进行绘制

19.3.21晚更新改好了

/**
     * 创建圆角矩形
     *
     * @param   [object]  $imageObj   [imagecreatefromjpeg() 返回一图像标识符]
     * @param   [int]  $arcRec_SX  [圆角矩形开始的X坐标]
     * @param   [int]  $arcRec_SY  [圆角矩形开始的Y坐标]
     * @param   [int]  $arcRec_W  [圆角矩形的宽度]
     * @param   [int]  $arcRec_H  [圆角矩形的高度]
     * @param   [int]  $redius     [圆角矩形的圆角弧度]
     * @param   []  $color      [php gd库里创建的颜色对象]
     *
     * @return  []              [没有返回值]
     */
    function arcRec($imageObj, $arcRec_SX, $arcRec_SY, $arcRec_W, $arcRec_H, $redius, $color)
    {
        // $arcRec_SX = 50;         //开始点X坐标
        // $arcRec_SY = 50;         //开始点Y坐标
        // $arcRec_EX = 500;       //结束点X坐标
        // $arcRec_EY = 500;       //结束点Y坐标
        // $redius = 50;           //圆角半径
        //$arcRec_W = $arcRec_EX - $arcRec_SX;
        //$arcRec_H = $arcRec_EY - $arcRec_SY;
        $arcRec_EX = $arcRec_SX + $arcRec_W;
        $arcRec_EY = $arcRec_SY + $arcRec_H;
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $color);        //矩形一
        imagefilledrectangle($imageObj, $arcRec_SX, $arcRec_SY + $redius, $arcRec_SX + $arcRec_W, $arcRec_SY + ($arcRec_H - ($redius * 1)), $color);//矩形二
        imagefilledrectangle($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - ($redius * 1)), $arcRec_SX + ($arcRec_W - ($redius * 1)), $arcRec_SY + $arcRec_H, $color);//矩形三
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + $redius, $redius * 2, $redius * 2, 180, 270, $color, IMG_ARC_PIE);   //四分之一圆 - 左上
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + $redius, $redius * 2, $redius * 2, 270, 360, $color, IMG_ARC_PIE);   //四分之一圆 - 右上
        imagefilledarc($imageObj, $arcRec_SX + $redius, $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 90, 180, $color, IMG_ARC_PIE);   //四分之一圆 - 左下
        imagefilledarc($imageObj, $arcRec_SX + ($arcRec_W - $redius), $arcRec_SY + ($arcRec_H - $redius), $redius * 2, $redius * 2, 0, 90, $color, IMG_ARC_PIE);   //四分之一圆 - 右下
    }

php使用gd库在图片中画圆角矩形

效果图

核心代码

实现原理

实战

代码讲解：

最终的index.php文件的代码为

TIPS

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读