[Closed] Can we change the origin of the canvas?

[loaded]

Hi All,
I'm pretty confused today from doing some experiments on cartography. Can we take the origin, which is in the upper left corner of the canvas of the Image component, to the lower left corner and reverse the y-axis? Instead, we can change coordinates with functions, but if there is such a feature in the original, I would like to use it. Respects.

[TRon]

afaik there is not such a provision. As an easy solution: subtract the y pixel coordinate from the height ?

n case you are talking about real x/y axis coordinates and want to flip then multiply by -1 and add half the height (for the axis)

[loaded]

Thank you very much for your reply TRon. Yes, I am using the solutions you suggested. But going from transformation to transformation while doing trial and error is a bit overwhelming. That's why I asked such a question because I was wondering if there was an original solution.

[alpine]

Hi All,
I'm pretty confused today from doing some experiments on cartography. Can we take the origin, which is in the upper left corner of the canvas of the Image component, to the lower left corner and reverse the y-axis? Instead, we can change coordinates with functions, but if there is such a feature in the original, I would like to use it. Respects.

If you're on Win you can use:

Code: Pascal  [Select][+][-]

1.   SetGraphicsMode(Canvas.Handle, GM_ADVANCED);
2.   SetWorldTransform(Canvas.Handle, M); // M describes the transform

but I'm afraid there is no such possibility on other platforms.

[speter]

Maybe do a search for "world coordinates" (or similar), you may find something - I would expect the BGRA library has something...

Alternatively, have a look at this project of mine; it draws "random" trees...

cheers
S.

[loaded]

Thank you very much alpine and speter for your replies.
alpine;
I don't want to stick to a solution that only works on windows. Also, I couldn't get it to work.
Speter;
By the way, the tree is very beautiful, for example, the content can be adapted, but this is also difficult.
I didn't want to use separate coordinates for separate calculations for drawing.
But in this case there is nothing to do, I will continue to use the old methods.
Respects.

[alpine]

Thank you very much alpine and speter for your replies.
alpine;
I don't want to stick to a solution that only works on windows. Also, I couldn't get it to work.
Speter;
By the way, the tree is very beautiful, for example, the content can be adapted, but this is also difficult.
I didn't want to use separate coordinates for separate calculations for drawing.
But in this case there is nothing to do, I will continue to use the old methods.
Respects.

I do not know what do you have in mind with the "old methods" but world <-> canvas transform is a must in a geo apps and the linear transformations (as in SetWorldTransform) are the natural way to do it. Perhaps you should wrap all your "points" in graphics primitives calls with some function F(x, y) which does such a transform. No way around it.

[loaded]

No way around it.

You are right, Komşu 
My life is spent walking into dead-end streets.

[circular]

With BGRABitmap, if you use its Canvas2d, you can apply a global transform so that coordinates are the way you like:

Code: Pascal  [Select][+][-]

1. var bmp: TBGRABitmap;
2. begin
3.   ...
4.   bmp.Canvas2d.translate(0, bmp.Height);
5.   bmp.Canvas2d.scale(1, -1);
6.   ...
7.   bmp.Canvas2d.resetTransform;
8.   ...
9. end;

You may also set the pixelCenteredCoordinates property depending on how you prefer the coordinates to be. By default Canvas2d does not have pixel-centered coordinates, so 0 is at the left border of the leftmost pixels.

[circular]

Maybe do a search for "world coordinates" (or similar), you may find something - I would expect the BGRA library has something...

Well guessed 

Alternatively, have a look at this project of mine; it draws "random" trees...

Beautiful trees 

[loaded]

Maybe do a search for "world coordinates" (or similar), you may find something - I would expect the BGRA library has something...

Well guessed 

If circular writes code, speter guesses it too. I definitely have to try this.

I mostly use the Canvas of the Image component for drawing operations. Therefore, the use of Canvas2D was very difficult for me due to old habits. Also, I think something needs to be done about the positions of the texts. [This is not a request to be corrected 

Also, in my various experiments on CanvasBGRA, the drawings are very nice, but I think it's a bit slow in big projects.(Highly likely my inexperience)

As a final word;
TBGRABitmap is truly a graphics beast. It needs to be practiced in skilled hands. Novices like me can easily lose the bridle. I understood this once again.

Code: Pascal  [Select][+][-]

1. uses BGRABitmap,BGRABitmapTypes;
2.  
3. procedure TForm1.Button1Click(Sender: TObject);
4. var
5.    bmp: TBGRABitmap;
6. begin
7.   bmp:=TBGRABitmap.Create(image1.Width,image1.Height,BGRA(255,255,255));
8.   with bmp.Canvas2D do
9.   begin
10.    translate(0, bmp.Height);
11.    scale(1, -1);
12.    fillStyle ('rgb(130,100,255)');
13.    strokeStyle ('rgb(0,0,255)');
14.    fontEmHeight:=20;
15.    beginPath();
16.    lineWidth:=2;
17.    moveTo(5,5);
18.    lineTo(20,10);
19.    lineTo(55,5);
20.    lineTo(45,18);
21.    lineTo(30,50);
22.    text('very thanks circular',100,100);
23.    closePath();
24.    stroke();
25.    fill();
26.   end;
27.   image1.Picture.Bitmap.Assign(bmp);
28. end;

[circular]

Happy to see my lib in action 

Indeed Canvas2d is a bit different. Note that the example here is to show you can use it almost like with Javascript, though you can for example write something more BGRA-like when setting fill and stroke style:

Code: Pascal  [Select][+][-]

1.    fillStyle(BGRA(130,100,255));
2.    strokeStyle(CSSBlue);
3.  

In the code here, the closePath should be just after the lineTo. It still works because text is handled a bit differently, but with a vectorized font it would probably look different. When you close the path, you're saying to connect the last point with the first point of the current subpath. So really what you want to close is the triangle shape.

Also here the text is only filled, not stroked. Finally to flip the text, you can use a local transform.

Code: Pascal  [Select][+][-]

1. procedure TForm1.Button1Click(Sender: TObject);
2. var
3.   bmp: TBGRABitmap;
4. begin
5.   bmp:=TBGRABitmap.Create(image1.Width,image1.Height,BGRA(255,255,255));
6.   with bmp.Canvas2D do
7.   begin
8.    translate(0, bmp.Height);
9.    scale(1, -1);
10.  
11.    fillStyle(BGRA(130,100,255));
12.    strokeStyle(CSSBlue);
13.    lineWidth:=2;
14.    beginPath;
15.    moveTo(5,5);
16.    lineTo(20,10);
17.    lineTo(55,5);
18.    lineTo(45,18);
19.    lineTo(30,50);
20.    closePath;
21.    stroke;
22.    fill;
23.  
24.    save;     // local transform
25.    beginPath;
26.    translate(100, 100);
27.    scale(1, -1);
28.    fontEmHeight:=20;
29.    text('you''re very welcome', 0.5, 0.5);
30.    fill;
31.    restore;  // back to previous transform
32.   end;
33.   image1.Picture.Bitmap.Assign(bmp);
34. end;
35.