Forum > BGRABitmap and LazPaint

Building a composite image

(1/11) > >>

J-G:
As a different approach to my question in the general [Graphic] forum (Trapping non-available resource), I'm looking at using some feature of BGRA..... to combine 4 images into one.

The issue is that I need an image which is variable in size but certain elements need to remain at a constant size and others vary according to the overall size but at a constant difference to each other !!!  %)  Phew !! that took some working out.

Full picture - - -  Gears,  these images must retain a centre portion which is always the same but three other parts which must be scaled. Of the four images attached, the 'OD' would be the first to be sized and added, then the 'PCD' which would be 10px smaller, then the 'Root' a further 11px smaller and finally the centre which would remain at its original size.   I'm sure you can see why a single image 'scaled' can't be used.

A number (Tooth count) would also be added but that would be trivial if the basic 'build' could be achieved.

I could position the four separate images I suppose but there could be up to 6 gears to draw and I suspect that placing a single image would be more efficient.

J-G:
Since I could only add 4 images to my original post, here is a finished composite image to give you a full picture of what I'm trying to achieve.

Handoko:
Maybe you can find something useful on my previous project - CATWW:
https://forum.lazarus.freepascal.org/index.php/topic,50989

The newest version 0.3 (see the image below), which has not been published, has improved further. But you still may find many useful techniques in the version 0.2, like:
- Image caching for performance improvement, multires version
- Runtime generating/showing a progress form when loading data
- BGRABitmap translate, resize, rotate, flip, resample, composition

Unfortunately the code is moderately optimized, it is a bit hard for novices to understand.

For your information, BGRABitmap is not fully hardware accelerated. If you want to do some real-time animations using it, you really need to do plenty of optimizations and/or image caching.

winni:
Hi!

You need only one BGRAbitmap.

And a lot of Ellipses.


--- 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.Button3Click(Sender: TObject);const HeightWidth = 300;      Radius1 = 140;      Radius2=135;      Radius3=120;      Radius4 = 50;      Radius5 = 40;var  tmp  : TBGRABitmap;     Center: TPointF;beginImage2.Canvas.Brush.Color := clWhite;Image2.Canvas.Fillrect(0,0,Image2.width, Image2.height); tmp := TBGRAbitmap.create(HeightWidth,HeightWidth);center := PointF (HeightWidth/2, HeightWidth/2);tmp.EllipseAntialias(Center.X, Center.y,Radius1,Radius1,cssOrange,2,cssGray);tmp.EllipseAntialias(Center.X, Center.y,Radius2,Radius2,cssGreen,4,cssGray); tmp.EllipseAntialias(Center.X, Center.y,Radius3,Radius3,CSSDarkGreen,2,cssGreen);tmp.EllipseAntialias(Center.X, Center.y,Radius4,Radius4,cssBlack,2,cssGray);tmp.EllipseAntialias(Center.X, Center.y,Radius5,Radius5,cssBlack,2,csswhite); tmp.FillRectAntialias(Center.x-5,Center.y-radius5-5, Center.x+5,Center.y-radius5+2, cssWhite); tmp.Draw(Image2.Canvas,0,0,false);tmp.free;end; 
Change the size and the radiuses to your need.
Change the colors to your needs.

Done.

Winni

J-G:
Hi Winni,

That looks interesting and I think I understand the logic, I can certainly see how I can pass the value of the OD (Radius1) from which the PCD & Root values can be deduced. Radius4 & Radius5 will always be the same so they can be set as 'Const'.  I don't understand how the 'keyway' is created, though that may be down to the use of a bitmap image as the 'starting point' of Image2.

The more important issue though is that the final image MUST be transparrent - including the centre bore with keyway. If this can be done using 'ReplaceTransparent(clRed);' and 'TransparentColor:=clRed;'  just before .Draw....  then the concept could have 'legs'.

Using Centre.X & .Y would be a benefit as I currently have to calculate the 'Top' & 'Left' positions before passing them to the 'Rotate' proc.   Although I use my 'Rotate' proc to draw the gears, in actual fact I only rotate one of them and that is a simple 45° CCW so that the Tooth count can be seen - it's not a full animation. The main reason for the 'Rotate' proc is to correctly position the image of the Gear Carrier, it just happens to be an easy way to process a transparent image.

If I can get this to work then the question about an image not being in the 'Resource' goes away, since an image of all posible 109 Gears can be created 'on the fly'.


Navigation

[0] Message Index

[#] Next page

Go to full version