Use WebPaintBox draw a SVG

WEB TMS WEB Core
1

Hello,


Is it possible to draw a SVG (Scalable Vector Graphics) file using TWebPaintBox? I found there is a method call draw(x,y, TGraphic), This TGraphic only supports icon, bmp or metafile types of images? 

On a different note, I tested to use draw method: I made a bmp image named as factory in the directory. however, it did not work. Please see below the code:

procedure TForm1.WebPaintBox1Paint(Sender: TObject);
var
  Bitmap : TBitMap;
begin
    Bitmap := TBitMap.Create;
    Bitmap.LoadFromFile('factory.bmp');
    WebPaintBox1.canvas.Draw(0,0,Bitmap);
end;

Thank you! 
2

TBitmap supports SVG.
The mistake here is that LoadFromFile is not synchronous in web.
You'd need to add a Bitmap.OnChange event. This is triggered when the image asynchronously loaded and only then you can draw the bitmap.
This can be used for BMP,PNG,JPG,SVG,ICO,WEBP

3

Hi Bruno,


Thanks for the reply. I just used Bitmap.OnChange event and loaded BMP, PNG and SVG successfully. However, Webpaintbox. canvas.method works for BMP and PNG but it did not work if I want to draw SVG file. Any suggestion for that?

Thanks again for your help.
4

Our test works here.
If you experience a problem, please provide details to allow us to reproduce this.

5

Hi, Here is code I am using for testing: if I LoadFromFile a bmp or pnp type image, paintbox draw method works, but seems not work for the paintbox to draw after I load a SVG file.


procedure TForm1.WebFormCreate(Sender: TObject);
begin
    Bitmap := TBitmap.Create;
    Bitmap.OnChange := LoadSVGFile;
    Bitmap.LoadFromFile('1.svg'); // can be replaced by a SVG, BMP etc.

end;

procedure TForm1.LoadSVGFile(Sender: TObject);
begin
    WebPaintBox1.canvas.Draw(0,0,Bitmap);
end;
6

Did you check the browser console for errors?

7

Sample project with BMP and SVG:

http://www.tmssoftware.net/public/drawsvgsample.zip
8

Hi, Thanks  for the sample project. I used your SVG file and draw it using my code and it works. I suspect that the problem is my SVG file since it was converted from emf type image using an application called Inkscape. I guess there is something occurred during the conversion that caused this problem. will investigate the detail, and anyway,  thanks again for your help.


Further question: TWebPaintbox does not have the ElementHandle property that is similar to other common controls like TWebButton? I am looking for the possibility to resize paintbox (with SVG on it) during runtime. have tried directly to change the width and height of paintbox. But it does not work, i.e. only the paintbox's size changed but SVG's size remained as original. Any suggestion for this?

Thanks
9

The Canvas has a graphics context (https://developer.mozilla.org/nl/docs/Web/API/CanvasRenderingContext2D), not an ElementHandle


You can access this with:
var
  ctx: TJSCanvasRenderingContext2D;
begin
  ctx := webpaintbox1.Canvas.Context;
end;

10

Awesome, That helps. Thanks, Bruno!