简体   繁体   中英

Create ellipse using php

I need to create an ellipse like below with custom colors.

自订图片

I'm using Intervention image library to achieve this.

What i've done is :
I've created 6 different transparent images for each section.
And trying to create a canvas and then masking other layer on it but the result is not as expected. I'm able to color only the first section of the image through this process.

    Image::configure(array('driver' => 'gd'));
    $img = Image::canvas(150,104,'#000')->insert(WWW_ROOT.DS.IMAGES_URL.'test/masks/1.png');
    $img->mask(WWW_ROOT.DS.IMAGES_URL.'test/masks/2.png', true);
    $img->mask(WWW_ROOT.DS.IMAGES_URL.'test/masks/3.png', true);
    $img->mask(WWW_ROOT.DS.IMAGES_URL.'test/masks/4.png', true);
    $img->mask(WWW_ROOT.DS.IMAGES_URL.'test/masks/5.png', true);
    $img->mask(WWW_ROOT.DS.IMAGES_URL.'test/masks/6.png', true);
    $img->save(WWW_ROOT.DS.IMAGES_URL.'test/test.png');
    echo $img->response();

I need help to create the above Custom Color image or any other options to achieve this.

Not perfect but better :

<?php
     $image = imagecreatetruecolor(300, 300);


    $white    = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
    $gray     = imagecolorallocate($image, 0xC0, 0xC0, 0xC0);
    $darkgray = imagecolorallocate($image, 0x90, 0x90, 0x90);
    $navy     = imagecolorallocate($image, 0x00, 0x00, 0x80);
    $darknavy = imagecolorallocate($image, 0x00, 0x00, 0x50);
    $red      = imagecolorallocate($image, 0xFF, 0x00, 0x00);
    $darkred  = imagecolorallocate($image, 0x90, 0x00, 0x00);
    $white = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);


    for ($i = 60; $i > 50; $i--) {
       imagefilledarc($image, 150, $i, 300, 50, 0, 60, $darknavy, IMG_ARC_PIE);
       imagefilledarc($image, 150, $i, 300, 50, 60, 120 , $darkgray, IMG_ARC_PIE);
       imagefilledarc($image, 150, $i, 300, 50, 120, 180 , $darkred, IMG_ARC_PIE);

       imagefilledarc($image, 150, $i, 300, 50, 180, 240 , $navy, IMG_ARC_PIE);
       imagefilledarc($image, 150, $i, 300, 50, 240, 270 , $gray, IMG_ARC_PIE);
       imagefilledarc($image, 150, $i, 300, 50, 270, 360 , $red, IMG_ARC_PIE);



    }

    imagefilledarc($image, 150, 50, 300, 50, 0, 60, $navy, IMG_ARC_PIE);
    imagefilledarc($image, 150, 50, 300, 50, 60, 120 , $gray, IMG_ARC_PIE);
    imagefilledarc($image, 150, 50, 300, 50, 120, 180 , $red, IMG_ARC_PIE);

    imagefilledarc($image, 150, 50, 300, 50, 180, 240 , $navy, IMG_ARC_PIE);
    imagefilledarc($image, 150, 50, 300, 50, 240, 270 , $gray, IMG_ARC_PIE);
    imagefilledarc($image, 150, 50, 300, 50, 270, 360 , $red, IMG_ARC_PIE);

    imagefilledarc($image, 150, 50, 280, 40, 0, 360, $white, IMG_ARC_PIE);



    header('Content-type: image/png');
    imagepng($image);
    imagedestroy($image);
?>

Why not use imageellipse(), imagefilledellipse() and imagefilledarc() ?

<?php

    // Création de l'image
    $image = imagecreatetruecolor(100, 100);

    // Allocation de quelques couleurs
    $white    = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
    $gray     = imagecolorallocate($image, 0xC0, 0xC0, 0xC0);
    $darkgray = imagecolorallocate($image, 0x90, 0x90, 0x90);
    $navy     = imagecolorallocate($image, 0x00, 0x00, 0x80);
    $darknavy = imagecolorallocate($image, 0x00, 0x00, 0x50);
    $red      = imagecolorallocate($image, 0xFF, 0x00, 0x00);
    $darkred  = imagecolorallocate($image, 0x90, 0x00, 0x00);

    // Création de l'effet 3D
    for ($i = 60; $i > 50; $i--) {
       imagefilledarc($image, 50, $i, 100, 50, 0, 45, $darknavy, IMG_ARC_PIE);
       imagefilledarc($image, 50, $i, 100, 50, 45, 75 , $darkgray, IMG_ARC_PIE);
       imagefilledarc($image, 50, $i, 100, 50, 75, 360 , $darkred, IMG_ARC_PIE);
    }

    imagefilledarc($image, 50, 50, 100, 50, 0, 45, $navy, IMG_ARC_PIE);
    imagefilledarc($image, 50, 50, 100, 50, 45, 75 , $gray, IMG_ARC_PIE);
    imagefilledarc($image, 50, 50, 100, 50, 75, 360 , $red, IMG_ARC_PIE);


    // Affichage de l'image
    header('Content-type: image/png');
    imagepng($image);
    imagedestroy($image);
    ?> 

Finally I was able to achieve the desired result.

What i've done is :

Used this image to get polygon coordinates of each region through this jQuery library .

After getting coordinates for each region I created the desired image using polygon function provided by Intervention Image Library .

Thanks to all for your help, maybe this can help someone else.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM