vfbb 280 Posted August 11, 2021 (edited) 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 12 5 Share this post Link to post
vfbb 280 Posted August 11, 2021 The result of a simple demo in delphi: ezgif.com-gif-maker.mp4 1 Share this post Link to post
hsauro 37 Posted August 11, 2021 Nice, I’ll try it, I’ve been recently using skia from python so I’m somewhat familiar with it. Share this post Link to post
Edwin Yip 154 Posted August 11, 2021 (edited) 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 Share this post Link to post
Guest Posted August 11, 2021 (edited) 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 Share this post Link to post
Edwin Yip 154 Posted August 11, 2021 Just for comprehensiveness - there is another wrapper here: https://github.com/zhaoyipeng/SkiaDelphi, but it's old. Share this post Link to post
dwrbudr 8 Posted August 11, 2021 Could you please add the source of the Skia Demo to the repository? Share this post Link to post
vfbb 280 Posted August 11, 2021 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. 1 Share this post Link to post
RDP1974 39 Posted August 11, 2021 skia is the library used in Flutter, nice work, thank you! Share this post Link to post
dwrbudr 8 Posted August 13, 2021 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; Share this post Link to post
Rollo62 520 Posted August 13, 2021 (edited) @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 Share this post Link to post
vfbb 280 Posted August 14, 2021 (edited) @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: 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. 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 1 2 Share this post Link to post
Guest Posted August 15, 2021 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) Share this post Link to post
Rollo62 520 Posted August 16, 2021 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. Share this post Link to post
vfbb 280 Posted August 16, 2021 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 Share this post Link to post
dwrbudr 8 Posted August 27, 2021 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. 2 Share this post Link to post
vfbb 280 Posted September 22, 2021 (edited) 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 8 1 Share this post Link to post
vfbb 280 Posted September 22, 2021 (edited) @Rollo62 Explained Svg limitations in documentation, and see how to avoid in the considerations. Edited September 22, 2021 by vfbb 1 Share this post Link to post
Antonello 1 Posted October 4, 2021 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 Share this post Link to post
vfbb 280 Posted October 5, 2021 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: 1 Share this post Link to post
hsauro 37 Posted December 27, 2021 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. Share this post Link to post
hsauro 37 Posted December 27, 2021 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. Share this post Link to post
vfbb 280 Posted December 28, 2021 @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. Share this post Link to post