Skia4Delphi

[vfbb 285]

Website: github.com/viniciusfbb/skia4delphi

 

Skia4Delphi is a cross-platform 2D graphics API for Delphi based on Google's Skia Graphics Library (skia.org).

 

Google's Skia Graphics Library serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Xamarin, Mozilla Firefox and Firefox OS, and many other products.

 

Skia provides a more robust Canvas, being very fast and very stable, with hundreds of features for drawing 2D graphics, in addition to a text shaping engine designed to render texts in the most diverse languages with right-to-left support (such as the Persian language), full support for loading SVG files, support for creating PDF files, support for rendering Lottie files (verotized animations created in Adobe After Effects), integration with the GPU, among countless other cool features.

 

Skia's idea is similar to Firemonkey's, the same codebase used in an OS will work the same on other platforms. It is also possible to design using the CPU in independent background threads.

 

Skia also has native codecs, of course if you don't use the SKCodec class, when loading an encoded image it will give priority to using the platform's native codec, but it is possible to use its codec, for example for jpeg files it uses libjpeg-turbo and for png files libpng which maybe in certain environments may perform better than native.

 

See some examples:

 

 

Advanced shapes

 

 

 

Advanced text rendering / shaping

 

 

Svg

 

 

Lottie files

 

And much more...

Edited August 11, 2021 by vfbb
Added tags

[vfbb 285]

The result of a simple demo in delphi:

 

[hsauro 40]

Nice, I’ll try it, I’ve been recently using skia from python so I’m somewhat familiar with it.

[Edwin Yip 154]

Very very very nice! And thanks for your great efforts in providing the Delphi community this powerful 2D library wrapper!

 

 Two questions:

- What's the most convenient way to obtain the skia dll without building from source?
  Update:  Sorry, I didn't notice the external skia repository since I use TortoiseSVN to checkout github repos, but there is still not any DLL inside that repository...
 

- What's the oldest Delphi compiler supported?

 

Thanks!

Edited August 11, 2021 by Edwin Yip

[Guest]

Impressive work, and i have 2 points to point

 

1) While the library mentioned as for XE6+, i can't compile it on XE8 or Seattle, so couldn't try it for myself.

 

2) About Right to Left Language support 

Quote

  LText := 'سلام دنیا!';
...
end;

This code results in the output below:

 

 (edit: can't paste the image of the wrong rendered text.)

 

Well this can't be right, and to my knowledge about Skia itself that it depend on the International Components for Unicode (ICU) project http://site.icu-project.org/ 

Hence, it will need the ICU data to render such text, combine that with Google Chrome does in fact include a dedicated file contain the ICU project data, also searching the internet i think you will need to provide the ICU data and Skia will be able to render RTL text right.

Peeking into the included Skia dynamic library, i say it does for a fact look for a file "icudtl.dat" (around 10mb file), which happen to be included in Google Chrome binary folder.

 

So i would suggest to investigate this and try to make the RTL text render right.

 

 

Hope that help.

 

 

ps: @Alexander Sviridenkov Thank you ! you nailed it.

 

 

Edited August 11, 2021 by Guest

[Edwin Yip 154]

Just for comprehensiveness - there is another wrapper here: https://github.com/zhaoyipeng/SkiaDelphi, but it's old. 

[dwrbudr 8]

Could you please add the source of the Skia Demo to the repository?

[vfbb 285]

2 hours ago, Edwin Yip said:

Very very very nice! And thanks for your great efforts in providing the Delphi community this powerful 2D library wrapper!

 

 Two questions:

- What's the most convenient way to obtain the skia dll without building from source?
  Update:  Sorry, I didn't notice the external skia repository since I use TortoiseSVN to checkout github repos, but there is still not any DLL inside that repository...
 

- What's the oldest Delphi compiler supported?

 

Thanks!

 

Just download the .zip file attached to the release tag, it contains the .dlls, .so and .a.  Externals has an edited version of Skia, with a flat api exclusive to the library. There are instructions for compiling in BUILD.md

 

2 hours ago, Kas Ob. said:

Impressive work, and i have 2 points to point

 

1) While the library mentioned as for XE6+, i can't compile it on XE8 or Seattle, so couldn't try it for myself.

 

2) About Right to Left Language support 

 (edit: can't paste the image of the wrong rendered text.)

 

Well this can't be right, and to my knowledge about Skia itself that it depend on the International Components for Unicode (ICU) project http://site.icu-project.org/ 

Hence, it will need the ICU data to render such text, combine that with Google Chrome does in fact include a dedicated file contain the ICU project data, also searching the internet i think you will need to provide the ICU data and Skia will be able to render RTL text right.

Peeking into the included Skia dynamic library, i say it does for a fact look for a file "icudtl.dat" (around 10mb file), which happen to be included in Google Chrome binary folder.

 

So i would suggest to investigate this and try to make the RTL text render right.

 

 

Hope that help.

 

 

ps: @Alexander Sviridenkov Thank you ! you nailed it.

 

 

 

1. I confess that I only tested the first versions on the XE6, but in fact the code has changed a lot since then. I will fix it.

2. SkShaper uses Harfbuzz, but your comment was great, because although the example works without icu data, investigating, I realize that to use Harfbuzz there is still a dependency on ICU. For macOS and iOS SkShaper uses CoreText, dispensing with ICU and Harfbuzz, which is great because in the case of iOS the library is static. Anyway, I'm going to investigate and test it on all platforms, even though it worked without icu data. It seems to me that PDF Subset also uses ICU, I'll investigate anyway.

 

1 hour ago, dwrbudr said:

Could you please add the source of the Skia Demo to the repository?

I'll clean up the demo code and create a little more robust example and add it to the repository.

[RDP1974 40]

skia is the library used in Flutter, nice work, thank you!

[dwrbudr 8]

I've tried to convert SVG to PNG with this library without luck. What's wrong with this code?

The SVG file is in the EXE folder as well as sk4d.dll
On other pretty simple SVG files, LDOM is nil, probably TSKSVGDOM is too strict.

var
  LDOM: ISKSVGDOM;
  LSize: TSizeF;
  LSVGStream: ISKStream;
  LSurface: ISKSurface;
  LImage: ISKImage;
begin
    LSurface := TSKSurface.MakeRaster(256, 256);

    LSVGStream := TSKFileStream.Create(ExtractFilePath(Application.ExeName) + 'porsche.svg');
    LDOM := TSKSVGDOM.Make(LSVGStream);
    (LDOM as TSkiaObject).DebugMessageProc := procedure(const AMessage: string)
    begin
        Caption := AMessage;
    end;
    LSize := LDOM.Root.GetIntrinsicSize(TSizeF.Create(0, 0)); // <== LSize is (0, 0) ?!

    LDOM.Render(LSurface.Canvas); // DebugMessageProc called with "can''t render image: load image failed"
    LImage := LSurface.MakeImageSnapshot;
    LImage.EncodeToFile(ExtractFilePath(Application.ExeName) + 'output.png', TSKEncodedImageFormat.PNG);
end;

 

[Rollo62 536]

@vfbb

Thanks for that great piece of code.

I was trying around a bit, to get closer to Skia and its capabilities.

 

As side-effect I felt free to add a "Playground" for your demos, so to make them more easy to handle.

Please find the source enclosed ( I had to remove the binaries, so they just needed to be completed from your repository ).

 

I always think its very important to have a lot of plug-and play demos available, but I see you are at initial V1.0 version right now.

So I hope this little playground might help to find more friends for your library soon.

 

Skia SVG support:

What I have found distracting is that Skia cannot load all SVG's.

Please check and try the demo at button T10, which first hit of T10 rescales to the SVG size, and then the second hit of T10 shows the image.

 

I have several samples, you need to uncomment and recompile, but only a few work.

          //LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\demo_highpoly.svg' ); //  'assets/samples/porsche.svg');
          LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\beach.svg' );
          //LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\book.svg' );
          //LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\leaves.svg' );
          //LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\bmw.svg' );
          //LSVGStream := TSKFileStream.Create( '..\..\..\_Assets\butterfly.svg' );

Most of them get back with size (0, 0), and I Show "Error" message.

 

Do you have any idea what is wrong with these SVG, I can see them well rendered in many other viewers ?

I thought Skia should be advanced in rendering anything, or am I wrong ?

 

 

 

 

T414_Skia4D_003.zip

Edited August 13, 2021 by Rollo62

[vfbb 285]

@Rollo62 @dwrbudr @RDP1974 @Edwin Yip @Kas Ob. @hsauro

 

I finally released version 1.1 which has been extensively tested on all platforms, which includes a complete demo project, demonstrating how to render svg files, lottie files and more, as well as fixing the issues with backwards compatibility, at the moment the library works on version XE6+ VCL or FMX.

Skia's SVG module is still in the experimental phase, even though it works extremely well with most SVG files. Some bugs we detected in Skia's SVG module will be reported later today, however, some issues I'll expose here so you can help the community:

1. Apparently, there is a format incompatibility - vectorized files exported as SVG by Adobe programs are not supported by Skia, however, if you use other online converters (like cloudconvert.com) to convert the .eps or the .ai to svg, it will probably works perfectly.
2. In macOS depending on the language, the decimal separator is not dot (.), ie the conversion from string to float happens wrong depending on the macOS default system language

Remarks: These errors are only in relation to the SVG module, which is still in the experimental phase, in addition, Skia is a robust and stable library; If the SVG file works on one platform, it will work the same on all.

 

 

Changelog

 

• Added FMX sample (working from delphi XE6 and above, with platforms Win32, Win64, OSX64, iOS64, Android32, Android64);
• Added VCL sample (working from delphi XE6 and above);
• Added pre-built binaries of skia to repository, to facilitate implementation and to serve the samples;
• Updated skia to version 0.29.0;
• Added icudtl.dat file to windows platform;
• Fixed text shaping with RTL language;
• Fixed compilation in iOS;
• Fixed backwards compatibility with delphi XE6 above;

 

 

About samples

 

The samples already have the binaries configured. They are ready to Run.

Edited August 15, 2021 by vfbb

[Guest]

Working as intended, nice !

 

Two things though

1) The background to show the Alpha Channel and transparency is nice touch, but too much dark, it is ruining the view,

suggestion : make the background it barely visible.
 

2) I don't think everyone will need the icudtl.dat, the library will work without so it may be better to mention in the description when icudtl.dat is needed and why, because your file is not the latest one, means someone might in the future need the latest Unicode support and it will fail, or the user doesn't care about Unicode text rendering at all, in this case he doesn't need this file.

suggestion : expand the documentation about the needed files in "Library Linking\Windows" section, and where one can get the latest icudtl.dat (eg. the original ICU project GitHub https://github.com/unicode-org/icu and /or built binary file from releases "icu4c-XXX-data-bin-l.zip" ) and where get a smaller one to render most of the Unicode ( eg. Chrome library, i found one in my Windows folder distributed by Microsoft)

[vfbb 285]

@Kas Ob. Made! Thanks.

[Rollo62 536]

On 8/14/2021 at 11:53 PM, vfbb said:

@Rollo62 @dwrbudr @RDP1974 @Edwin Yip @Kas Ob. @hsauro

 

Apparently, there is a format incompatibility - vectorized files exported as SVG by Adobe programs are not supported by Skia,

Do You mean raster images, that have been "vectorized", or any Adobe SVG in general ?

 

Have you figured out what exactly went wrong in those Adobe files ?

Maybe there are easy ways to re-convert it ( like open/save with InkScape) to make them running, I will try to check that later.

[vfbb 285]

4 hours ago, Rollo62 said:

Do You mean raster images, that have been "vectorized", or any Adobe SVG in general ?

 

Have you figured out what exactly went wrong in those Adobe files ?

Maybe there are easy ways to re-convert it ( like open/save with InkScape) to make them running, I will try to check that later.

I didn't really investigate enough, I just noticed that more complex SVGs converted by Adobe programs weren't being read correctly. I reported this issue to skia and sent two examples of .eps files converted to SVG by adobe and another converter, where adobe's SVG is not rendered and other converters' SVG is rendered.

 

Examples are attached.

incompatible_svgs.zip

[dwrbudr 8]

The skottie player demo using check.json doesn't correctly draw the image. See the black rugged edge border when the circle is being painted.

Instead of using TWICBitmap, I've switched to 32bit TBitmap and created the TSKSurface like this:

 

          LSurface := TSKSurface.MakeRasterDirect(TSKImageInfo.Create(
            fBitmap.Width, fBitmap.Height,
            TSKColorType.BGRA8888), fBitmap.ScanLine[fBitmap.Height - 1],
            BytesPerScanLine(fBitmap.Width, 32, 32));
          LSurface.Canvas.Clear(TAlphaColors.Null);
          FAnimation.Render(LSurface.Canvas, fDestRect);

		  //flip the image since the DIB is bottom-up orientaded
          StretchBlt(fBitmap.Canvas.Handle,
           0, 0, fBitmap.Width, fBitmap.Height,
           fBitmap.Canvas.Handle,
           0, fBitmap.Height - 1, fBitmap.Width, -fBitmap.Height,
           SRCCOPY);

Now all seem OK and the border is not rugged, not sure whtat's wrong with TWICBitmap. Check the border of the images below.

 

 

[Sergionn 0]

Great work done!

[vfbb 285]

 

 

We are very pleased to announce the 2.0 release of the Skia4Delphi project. The library was almost completely rewritten, bringing many new features such as visual components (VCL/FMX), easy installation, easy configuration, miscellaneous error handling, and much more. Now it also has many more features as well as more examples. See main changes:

 

v2.0.0

 

• Added support for Delphi 11
• Added support for OSX ARM 64-bit
• Added Setup (friendly install)
• Added IDE plugin to enable the skia in your project: replacing manual changes in project settings, deployment and dlls that were needed before. Now it's automatic, just right click on your project inside the IDE then "Enable Skia"
• Built-in by default the "icudtl.dat" file in dll
• Added the controls TSkLottieAnimation, TSkPaintBox and TSkSvg
• Added SkParagraph (multiple styles in text)
• Added support for Telegram stickers (using TSkLottieAnimation)
• Added error handling in sensitive methods
• Added the source of our website: https://skia4delphi.org
• Library rewritted
• Improved the integration with apple's MetalKit
• Improved library usage, like replacing SkStream to TStream
• Fixed AccessViolation using TStream
• Fixed issue with transparent bitmap in Vcl sample
• Fixed minor issues
• Explained Svg limitations in documentation
• We are now using the latest inactive milestone release of Skia (M88), because the others are updated frequently.
• Deprecated non-windows platforms in Delphi 10.3 Rio or older

 

Homepage: skia4delphi.org

GitHub: https://github.com/viniciusfbb/skia4delphi

 

 

 

 

 

A liittle preview

 

 

Setup

Just download the Skia4Delphi_2.0.0_Setup.exe attached in Releases page.

 

 

Enabling your project

 

 

Telegram sticker (tgs files):

 

 

SkParagraph:

 

 

WebP:

kung_fu_panda.webp

 

Format	Size
Png (100% quality)	512 KB
Jpeg (80% quality)	65.1 KB
WebP (80% quality)	51.6 KB

 

 

Controls

 

 

 

 

And much more...

 

 

Edited September 22, 2021 by vfbb

[vfbb 285]

@Rollo62

Explained Svg limitations in documentation, and see how to avoid in the considerations.

Edited September 22, 2021 by vfbb

[Antonello 1]

Hello, I would like to integrate freehand drawing into my firemonkey mobile application.

I tried with the standard tools drawing on a Canvas using the onMouseDown and onMouseMove events ... but the result is always very jagged lines.

Is it possible with Skia4Delphi to have a better result? I get the drawing like the picture attached here

Thank you

Antonello

[vfbb 285]

13 hours ago, Antonello said:

Hello, I would like to integrate freehand drawing into my firemonkey mobile application.

I tried with the standard tools drawing on a Canvas using the onMouseDown and onMouseMove events ... but the result is always very jagged lines.

Is it possible with Skia4Delphi to have a better result? I get the drawing like the picture attached here

Thank you

Antonello

 

Made sample here: https://github.com/viniciusfbb/skia4delphi/issues/12#issuecomment-933528854

 

Result:

 

 

[hsauro 40]

I’m trying to display rotated text using skiaDelphi but it appears that the recommended skia way is to rotate the underlying image, write your text, then rotate the image back again. That can work but it requires some thought with respect  to coordinates.

 

some users from the c# community suggested using a path as in

using (SKPaint skPaint = new SKPaint())
{
  SKPath path = new SKPath();
  path.MoveTo(original.Width / 10, original.Height - original.Height / 10);
  path.LineTo(original.Width - original.Width / 10, original.Height / 10);

  canvas.DrawTextOnPath(textToWrite, path, 0, 0, skPaint);
  path.Dispose()
}

but I don’t see the method drawtextonpath in the skia4delphi library. 

[hsauro 40]

7 minutes ago, hsauro said:

I’m trying to display rotated text using skiaDelphi but it appears that the recommended skia way is to rotate the underlying image, write your text, then rotate the image back again. That can work but it requires some thought with respect  to coordinates.

 

some users from the c# community suggested using a path as in

using (SKPaint skPaint = new SKPaint())
{
  SKPath path = new SKPath();
  path.MoveTo(original.Width / 10, original.Height - original.Height / 10);
  path.LineTo(original.Width - original.Width / 10, original.Height / 10);

  canvas.DrawTextOnPath(textToWrite, path, 0, 0, skPaint);
  path.Dispose()
}

but I don’t see the method drawtextonpath in the skia4delphi library. 

I found this 

 

https://github.com/mono/SkiaSharp/issues/1183

 

looks like Google removed that functionality. Guess it’s rotate image, draw, rotate image back.

[vfbb 285]

@hsauro  What exactly do you want to do? Draw text around a circle? Do you have any image of what it would be like? Drawing text along a path is not trivial, but depending on what it is, we can try to make a non-morphing example, just using letter rotation.