Forum > BGRABitmap and LazPaint

Subject: How to implement "MidPoint color" concept in gradient in photoshop, Usi

(1/1)

Sanem:
HI
I wanna implement the midpoint concept in Photoshop gradient using BGRA gradinet, as you can see in Screenshots attached (Left one is Photoshop gradinet for midpoint in its default position which is 50% and right one is the midpoint in 20% of the left color), the concept of midpoint in Photoshop is that we can change the location of the midpoint by dragging the icon closer to one color or the other. For example, when I drag it towards the left so it's closer to green stop. Notice the effect it's had on the gradient. With the midpoint now closer to green, I've shortened the transition area between green and the midpoint, and lengthened the transition between the midpoint and red.
it is not something i can implement by adding a middle point (a new color and a new position) in BGRA gradinet method, any idea how to implement this concept using BGRA gradinet methods?? Any idea??
(This question was raised first time in the thread:
http://forum.lazarus.freepascal.org/index.php/topic,31536.msg209491.html#msg209491
and I wanted to continue it in a new topic for gaining more idea or help and to be seen as a new topic generally.)

Any help appreciated prior
Regards

Here is my code for drawing the gradinet:


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} --- unit Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls, Menus,  BGRABitmap, BGRABitmapTypes, BGRAGradients, BGRAGradientScanner, BGRAResample; type   { TForm1 }   TForm1 = class(TForm)    procedure FormPaint(Sender: TObject);  private  public  end; var  Form1: TForm1; implementation {$R *.lfm} { TForm1 }procedure TForm1.FormPaint(Sender: TObject);var  bmp: TBGRABitmap;  p1, p2: TPointF;  g: TBGRAMultiGradient;  gs: TBGRAGradientScanner;begin  bmp := TBGRABitmap.Create(Width, Height, clWhite);  p1 := PointF(0, Height / 2);  p2 := PointF(Width, Height / 2);  g := TBGRAMultiGradient.Create([BGRA(0, 0, 255), BGRA(0, 255, 0), BGRA(255, 0, 0)], [0, 0.5, 1], True, False);  g.InterpolationFunction := @g.CosineInterpolation;  gs := TBGRAGradientScanner.Create(g, gtLinear, p1, p2);  BGRASetGamma(1.45);  bmp.FillRectAntialias(0, 0, Width, Height, gs);  bmp.SaveToFile('Pics\BGRA_50%.png');  bmp.Draw(Canvas, 0, 0);  bmp.Free;end; end.  

lainz:
Seems that you're making a photoshop clone or something like that! :)

Sanem:

--- Quote from: lainz on September 04, 2016, 11:02:47 pm ---Seems that you're making a photoshop clone or something like that! :)

--- End quote ---


Not really, I just was working on graphic related concepts ;) 

MaartenJB:
That's exactly what I needed, thanks for sharing it works great!

circular:
To reproduce the wanted effect, (second gradient), you can do something like:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TForm1.FormPaint(Sender: TObject);var  bmp: TBGRABitmap;  p1, p2: TPointF;  g: TBGRAMultiGradient;  gs: TBGRAGradientScanner;begin  BGRASetGamma(1.45);  bmp := TBGRABitmap.Create(Width, Height, clWhite);  p1 := PointF(0, Height / 2);  p2 := PointF(Width, Height / 2);  g := TBGRAMultiGradient.Create(    [BGRA(0, 0, 255),    BGRA(0, 255, 0),    MergeBGRAWithGammaCorrection(BGRA(0, 255, 0), 1, BGRA(255, 0, 0), 1),    BGRA(255, 0, 0)],    [0, 0.5, 0.6, 1], True);  g.InterpolationFunction := @g.CosineInterpolation;  gs := TBGRAGradientScanner.Create(g, gtLinear, p1, p2);  bmp.FillRectAntialias(0, 0, Width, Height, gs);  bmp.SaveToFile('BGRA_50%.png');  bmp.Draw(Canvas, 0, 0);  bmp.Free;end;

Navigation

[0] Message Index

Go to full version