How can I rotate this hexagon, without rotating the image?

Question

How can I rotate this hexagon, without rotating the image?

Navigation

#1 by (3 votes)

3

How can I rotate this hexagon, without rotating the image. I would also like to know how to resize the image already generated, so that both the hexagon and the image change in size.

This is the script I use.

<?php
// doge.jpg is a squared pic
$raw = imagecreatefromjpeg('img.jpg'); 

/* Simple math here

        A_____F
        /     \
      B/       \E
       \       /
       C\_____/D

*/
$w = imagesx($raw); 
$points = array(
.25 * $w, .067  * $w, // A 
0, .5   * $w, // B
.25 * $w, .933  * $w, // C
.75 * $w, .933  * $w, // D
$w, .5  * $w, // E
.75 * $w, .067  * $w  // F
);

// Create the mask
$mask = imagecreatetruecolor($w, $w);
imagefilledpolygon($mask, $points, 6, imagecolorallocate($mask, 255, 0, 0));

// Create the new image with a transparent bg
$image = imagecreatetruecolor($w, $w);
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagealphablending($image, false);
imagesavealpha($image, true);
imagefill($image, 0, 0, $transparent);

// Iterate over the mask's pixels, only copy them when its red.
// Note that you could have semi-transparent colors by simply using the mask's 
// red channel as the original color's alpha.
for($x = 0; $x < $w; $x++) {
for ($y=0; $y < $w; $y++) { 
    $m = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
    if($m['red']) {
        $color = imagecolorsforindex($raw, imagecolorat($raw, $x, $y));
        imagesetpixel($image, $x, $y, imagecolorallocatealpha($image,
                          $color['red'], $color['green'], 
                          $color['blue'], $color['alpha']));
    }
}
}

// Display the result
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);

php

asked by Eddy Otsutsuki 17.06.2016 в 21:42

source

1 answer

New in MVVM Doubt with inotifypropertychanged Various doubts with div [closed]

score 3 · Accepted Answer

This question is divided into two parts:

How to rotate the hexagon

How to scale the image

The first is a simple matter of mathematics (as indicated in the same code you share), the second is just a matter of applying one more function.

How to rotate the hexagon

Right now the hexagon is created because pixels are copied within the area specified in the $points array, so all you have to do is recalculate the points.

This is what you have now:

/* Simple math here

        A_____F
        /     \
      B/       \E
       \       /
       C\_____/D

*/
$w = imagesx($raw); 
$points = array(
.25 * $w, .067  * $w, // A 
0, .5   * $w, // B
.25 * $w, .933  * $w, // C
.75 * $w, .933  * $w, // D
$w, .5  * $w, // E
.75 * $w, .067  * $w  // F
);

To make it a hexagon with the tip above change that part, by this code:

/* Simple math here

           A
          /\    
       B /  \ F
        |    |
       C|    |E
         \  /
          \/
          D
*/
$w = imagesx($raw); 
$points = array(
0.5 * $w, 0, // A
0.1* $w, 0.25 * $w, // B
0.1 * $w, 0.75 * $w, // C
0.5 * $w, $w, // D
0.9 * $w, 0.75 * $w, // E
0.9 * $w, 0.25 * $w // F
);

The coordinates are a bit to eye and you will have to recalculate them if you want to be a perfect hexagon, but they work (more or less well) in my premises:

How to scale the image

To scale the image you only need the imagescale () function, which works like this:

imagescale(imagen, nuevo_ancho, nuevo_alto);

So in your case you could do something like this to resize / scale the image to 400 x 400:

$image = imagescale($image, 400, 400);

An important note: when you scale the image is important and it is not trivial because it will affect both the quality of the image and the performance of your code:


If you scale the image once the hexagon has been generated, you will have to redefine the transparency and also the result would end up pixelated. But the image will be generated fast.




If you scale the image at the beginning as soon as you read it, the result will be cleaner and it will look better, but it will take longer to generate the result image (because it will have to process twice as many pixels).