Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fill the gradient colour in my custom shape polygon jpgraph

Tags:

php

draw

gd

jpgraph

I am working with the jpgraph and creating radar chart.

Facing the issue with fill custom shape polygon with gradient colour.

I have function to fill a gradient colour polygon with a flat bottom and i want to fill the gradient colour in my custom shape polygon. Can anyone help me? How can i do this?

Current Output:

enter image description here

Desired Output:

enter image description here

You can find the gradient class at here.

http://code.google.com/r/linksoftafrica-maison-george/source/browse/libs/jpgraph/jpgraph_gradient.php

// Fill a special case of a polygon with a flat bottom
// with a gradient. Can be used for filled line plots.
// Please note that this is NOT a generic gradient polygon fill
// routine. It assumes that the bottom is flat (like a drawing
// of a mountain)
function FilledFlatPolygon($pts,$from_color,$to_color) {
    if( count($pts) == 0 ) return;

    $maxy=$pts[1];
    $miny=$pts[1];          
    $n = count($pts) ;
    for( $i=0, $idx=0; $i < $n; $i += 2) {
        $x = round($pts[$i]);
        $y = round($pts[$i+1]);
        $miny = min($miny,$y);
        $maxy = max($maxy,$y);
    }

    $colors = array();
    $this->GetColArray($from_color,$to_color,abs($maxy-$miny)+1,$colors,$this->numcolors);
    for($i=$miny, $idx=0; $i <= $maxy; ++$i ) {
        $colmap[$i] = $colors[$idx++]; 
    }

    $n = count($pts)/2 ;
    $idx = 0 ;
    while( $idx < $n-1 ) {
        $p1 = array(round($pts[$idx*2]),round($pts[$idx*2+1]));
        $p2 = array(round($pts[++$idx*2]),round($pts[$idx*2+1]));

        // Find the largest rectangle we can fill
        $y = max($p1[1],$p2[1]) ;
        for($yy=$maxy; $yy > $y; --$yy) {
            $this->img->current_color = $colmap[$yy];
            $this->img->Line($p1[0],$yy,$p2[0]-1,$yy);
        }

        if( $p1[1] == $p2[1] ) continue; 

        // Fill the rest using lines (slow...)
        $slope = ($p2[0]-$p1[0])/($p1[1]-$p2[1]);
        $x1 = $p1[0];
        $x2 = $p2[0]-1;
        $start = $y;
        if( $p1[1] > $p2[1] ) {
            while( $y >= $p2[1] ) {
                $x1=$slope*($start-$y)+$p1[0];
                $this->img->current_color = $colmap[$y];
                $this->img->Line($x1,$y,$x2,$y);
                --$y;
            } 
        }
        else {
            while( $y >= $p1[1] ) {
                $x2=$p2[0]+$slope*($start-$y);
                $this->img->current_color = $colmap[$y];
                $this->img->Line($x1,$y,$x2,$y);
                --$y;
            } 
        }
    }
}
like image 601
Jayson Avatar asked Apr 29 '15 06:04

Jayson


1 Answers

It looks to me that your current code is not suitable for this task. You need code for Gouraud shaded triangles (3-sided polygons).

When you have code for that, you simply draw three triangles where on point of the triangle is in the center of the graph and two points are on the radar axles.

Unfortunately, I didn't find ready-made code for jpgraph.

like image 181
Mikko Rantalainen Avatar answered Oct 14 '22 00:10

Mikko Rantalainen