Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bezier curve drawing tool #1363

Merged
merged 2 commits into from
Jun 9, 2024

Conversation

gammalogic
Copy link

This commit adds a new bezier curve drawing tool as discussed in #1335.

The following code can be used to generate the sample image below:

require('./vendor/autoload.php');

use Intervention\Image\ImageManager;
use Intervention\Image\Drivers\Gd\Driver;
use Intervention\Image\Geometry\Factories\BezierFactory;

// create image manager with desired driver
$manager = new ImageManager(new Driver());

// read image from file system
// to display the sample set correctly the recommended image dimensions should be 350 x 500 pixels
$image = $manager->read('test.png');

// resize image proportionally to 500px height
$image->scale(height: 500);

// fill canvas background
$image = $image->fill('#444');

// draw a red cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 50); // control point 1
    $bezier->point(200, 50); // control point 2
    $bezier->point(150, 200); // control point 3
    $bezier->point(300, 200); // control point 4
    $bezier->border('#f00', 36); // border color & size
});

// draw an orange cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 50); // control point 1
    $bezier->point(200, 50); // control point 2
    $bezier->point(150, 200); // control point 3
    $bezier->point(300, 200); // control point 4
    $bezier->border('#ff7f00', 28); // border color & size
});

// draw a yellow cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 50); // control point 1
    $bezier->point(200, 50); // control point 2
    $bezier->point(150, 200); // control point 3
    $bezier->point(300, 200); // control point 4
    $bezier->border('#ff0', 20); // border color & size
});

// draw a green cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 50); // control point 1
    $bezier->point(200, 50); // control point 2
    $bezier->point(150, 200); // control point 3
    $bezier->point(300, 200); // control point 4
    $bezier->border('#0f0', 12); // border color & size
});

// draw a blue cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 50); // control point 1
    $bezier->point(200, 50); // control point 2
    $bezier->point(150, 200); // control point 3
    $bezier->point(300, 200); // control point 4
    $bezier->border('#00f', 4); // border color & size
});

// draw a yellow quadratic bezier curve with a filled red background
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(300, 260); // control point 1
    $bezier->point(150, 335); // control point 2
    $bezier->point(300, 410); // control point 3
    $bezier->background('f00'); // background color
    $bezier->border('ff0', 10); // border color & size
});

// draw a yellow cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 150); // control point 1
    $bezier->point(200, 350); // control point 2
    $bezier->point(200, 50); // control point 3
    $bezier->point(50, 250); // control point 4
    $bezier->border('#ff0', 10); // border color & size
});

// draw a yellow cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 250); // control point 1
    $bezier->point(200, 150); // control point 2
    $bezier->point(200, 450); // control point 3
    $bezier->point(50, 350); // control point 4
    $bezier->border('#ff0', 10); // border color & size
});

// draw a yellow cubic bezier curve
$image->drawBezier(function (BezierFactory $bezier) {
    $bezier->point(50, 350); // control point 1
    $bezier->point(200, 550); // control point 2
    $bezier->point(200, 250); // control point 3
    $bezier->point(50, 450); // control point 4
    $bezier->border('#ff0', 10); // border color & size
});

// save modified image in new format
$image->toPng()->save('foo.png');

header('Content-Type: image/png');
echo file_get_contents('foo.png');

II Bezier Curve Tool Sample Image

@olivervogel
Copy link
Member

olivervogel commented Jun 8, 2024

Wow, this is just flawless! I'm going to try the feature in detail, but I think it can be adopted as is and become part of version 3.7, which is scheduled for June 15th next week. Many thanks.

Copy link
Member

@olivervogel olivervogel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just have a few small change requests. Otherwise, very good work!

* @param float $t
* @return array{'x': float, 'y': float}
*/
public function calculateQuadraticBezierInterpolationPoint(float $t = 0.05): array
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method can be private to make it clear that it is only used locally.

Suggested change
public function calculateQuadraticBezierInterpolationPoint(float $t = 0.05): array
private function calculateQuadraticBezierInterpolationPoint(float $t = 0.05): array

* @param float $t
* @return array{'x': float, 'y': float}
*/
public function calculateCubicBezierInterpolationPoint(float $t = 0.05): array
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method can be private to make it clear that it is only used locally.

Suggested change
public function calculateCubicBezierInterpolationPoint(float $t = 0.05): array
private function calculateCubicBezierInterpolationPoint(float $t = 0.05): array

* @throws GeometryException
* @return array{0: array<mixed>, 1: array<mixed>}
*/
public function calculateBezierPoints(): array
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method can be private to make it clear that it is only used locally.

Suggested change
public function calculateBezierPoints(): array
private function calculateBezierPoints(): array

/**
* Draw a bezier curve on the current image
*
* @link
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Documentation not yet available but let's take this link.

Suggested change
* @link
* @link https://image.intervention.io/v3/modifying/drawing#draw-bezier-curves

@gammalogic
Copy link
Author

Thank you for your feedback and suggestions Oliver, I have made the changes.

@olivervogel olivervogel merged commit 56a92c7 into Intervention:develop Jun 9, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants