I am trying to write a drawing application that allows users to select two points on canvas and draws a line between those points pixel-by-pixel. In WinForms that would be an easy solution - create a canvas, get its bitmap, draw on the bitmap using the SetPixel method, and replace the canvas bitmap. I am wondering if there is a way to do this in a similar way in AvaloniaUI? From what I understood, it uses SkiaSharp under the hood. However, solutions to render SKCanvas on Avalonia.Controls.Canvas seem... hard. Although SKBitmap also has the SetPixel method. The question is not about how to draw a line - it is about how to set single pixels on Bitmap in AvaloniaUI and set this bitmap to the Avalonia.Controls.Canvas.
Here are some links I found:
https://github.com/AvaloniaUI/Avalonia/pull/2371
https://github.com/AvaloniaUI/Avalonia/issues/2492
AvaloniaUI - How to draw directly on the canvas - Unfortunately, I am not allowed to draw on the canvas itself.
Artifacts on Avalonia WriteableBitmap BitmapContext - unsafe code, three extension methods... while an option seems a little bit too complex.
P.S. As tempting as this may sound, drawing a rectangle-by-rectangle of size 1x1 as in the official documentation example (https://docs.avaloniaui.net/docs/controls/canvas) is also not allowed by the university.
P.P.S. I am not asking anyone to do the homework for me - in case you are worried about that please, consider this a framework comparison question, not a "please do that for me" one. I have found and linked solutions that I can use - it just seems to me that there should be a more easy way to achieve the result I seek. That's why I have asked the question - in case I missed something.
Doing a Jedi thing: this is not some student trying to lay off his work on other people. You can go by your business
UPDATED: you can swap bitmap on the image control: https://docs.avaloniaui.net/docs/controls/image
The original question (although poorly stated, my bad) was intented to clarify if there is a way to perform the SetPixel operation on the Avalonia bitmap. Unfortunately, currently, it doesn't seem like an available option: so the only way is to either create a custom drawing context OR control OR conversion between different Bitmap types (like System.Drawing.Bitmap or SkBitmap from SkiaSharp) to Avalonia.WriteableBitmap. All those solutions are referenced in the original question.
Related
I've got this problem:
I created a pretty large Canvas in WPF with a lot children.
I want to add a Print Button. PrintVisual seems not to work, because the image is to big. (I am using a scrollbar) I want to split the Canvas between multiple pages.
What i've done so far:
I am taking a Visual Brush for every part of the Canvas
Create a new Canvas and make the visual brush its background
Adding the new Canvas to a page, add the page to a FixedDocument.
Well, now i've got a FixedDocument and going to print it via printDocument.
The Problem is, that the whole process of printing takes a lot of time and sometimes it doesn't work at all. It's like there is a preprocessing step to convert the fixed document into a bitmap.
My Question: Is a Visualbrush in a Canvas to big? Should i convert the Canvas first into a bitmap?
I've found this great article: http://www.codeproject.com/Articles/339416/Printing-large-WPF-UserControls.
Whatever.
Is it a good way to convert a huge canvas into a bitmap first and then print parts of the bitmap? I could very well imagine, that one could get problems with blurring effects this way.
I've got also no idea how to add a bitmap to a page in wpf.
The worst thing is, that i couldn't found some really good sorces or a standardway (and i think there has to be one, cause this should be a pretty standard problem) for printing dynamic produced canvas in wpf.
I am really greatful for every really good source, help or code.
Thank you for your time.
I'm making an app for Windows 8.1 where it is important to be able to zoom in and examine images in detail. If I just open up the bitmap and zoom in it looks like.
However when I load the image into my app and use the ScrollViewer to zoom in I get.
As it appears to be trying to interpolate pixel values for some sort of anti-aliasing.
How can I get it so that when I zoom in it shows (as best it can) the exact pixels of the image? In particular I'm using the image as the background to a canvas which is contained in a scroll viewer.
I've looked around on here and MSDN and found a pair of related questions, but as yet they don't seem to have solved my exact problem.
A discussion on WPF
A similar issue with a canvas
Older related question on pixel art
A way to use bitmap encoding (which I couldn't get to work)
Similarly phrased question
There is no easy way to go about this, your best option is to use DirectX to render the image much larger so that you can mitigate the effect of WinRT automatically interpolating pixel values.
As someone explained on MSDN and based on this outstanding request I can't see any other way to accomplish this.
Use Win2D
Win2D is a DirectX inter-op library for WinRT. With this you can render the image at a much larger size, and then set the default zoom level for the scrollViewier to be very small. Because of this when you zoom in it will appear to be that you can see the individual pixels without any fuzzy/blurry interpolation because you will actually be seeing groups of 64 pixels or so all as one color. I couldn't find any way to actually override what kind of interpolation gets done so this seems to be the best method.
Download Win2D as a NuGet package using Visual Studio, Win2D's
quickstart guide does a good job explaining some of the setup
Set up your canvas and the draw event and use the DrawImage function to render the image larger
<ScrollViewer x:Name="Scroller" ZoomMode="Enabled"
MinZoomFactor="0.1" MaxZoomFactor="20">
<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" CreateResources="create"/>
</ScrollViewer>
In the canvas_draw function.
canvas.Width = original.Width * 10;
canvas.Height = original.Height * 10;
args.DrawingSession.DrawImage(bitmap,new Rect(0,0,original.Width*10,original.Height*10), new Rect(0,0,original.Width,original.Height), 1.0f, CanvasImageInterpolation.NearestNeighbor);
Make sure to set your canvas to be larger as well
In your code behind set the default zoom of your ScrollVieiwer to be appropriate so your image appears to be the same size.
In the page constructor
Scroller.ZoomToFactor (0.1f);
Other Ways Which I Looked Into and Didn't Work
Making the canvas very large and using BitmapEncoder/BitmapDecoder with the interpolation mode set to NearestNeighbor, this introduced lots of visual artifacts even when scaled to a power of 2 size
Render options only appear to be usable in WPF and not WinRT
It may also be possible to use some image manipulation library to simply make the bitmap 10x or so as large and then use that, but I ended up using Win2D instead.
I want to paint an WPF-Element like a colorwheel, you know from the HSV color space.
i dont know how to do this, i havnt found a possibility based on the standard brushes (SolidColorBrush, GradientBrush, etc)
How is a (mathematical) painting possible on wpf-shapes?
when you talk about Brushes and Pens you are talking about GDI+ and in GDI+ you have full control on anything since you are basically deciding which pixel to turn on, not so low of course but using lines, polygons and paths.
for a comparison between GDI+ and WPF or simply for some info regarding how to move from the first to the second, check this one: C# Transition between GDI+ and WPF there are some answers with lots of details
Currently I'm using a System.Windows.Media.DrawingGroup to store some tiled images (ImageDrawing) inside the Children-DrawingCollection property.
Well the problem is now, this method gets really slow if you display the entire DrawingGroup in an Image control, because my DrawingGroup can contain hundreds or even thousands of small images it can really mess up the performance.
So my first thought was to somehow render a single image from all the small ones inside the DrawingGroup and then only display that image, that would be much faster. But as you might have figured out I haven't found any solution so simply combine several images with WPF Imaging.
It would really be great if someone could help with this problem or tell me how i can improve the performance with the DrawingGroup or even use another approach.
One last thing, currently I'm using a RenderTargetBitmap to generate a single BitmapSource from the DrawingGroup, this approach isn't really faster, but it makes the scrolling and working on the Image control at least a little smoother.
I'm not sure this applies to your problem, but I'll post it here anyway since it might help someone:
If not all of the images in the drawing group is going to be visible at the same time, you could set the ClipGeometry property to whatever you want it to draw. This effectively tells WPF that the parts outside of the geometry is not needed and will be skipped during rendering.
A few other things you could experiment with are:
Freeze the drawinggroup before applying it to your image source. At least it couldn't hurt (unless you really need to modify the instance, but remember you could always just create a new one instead of modifying the old)
Try different ways to display your drawinggroup. For instance as a DrawingVisual (which is considered light weight) or as a DrawingBrush to paint e.g. a rectangle.
Combine the small images into smaller groups which you then combine to your bigger group. No idea if this improves or hurts performance, but it could be worth trying.
I'm working on a problem having to do with tiled images, with the added complication of having to display some images overlaid on others.
I haven't run into any performance issues (and likely won't since my images are rather small and relatively small in number, around 100 max.), but I did come across the Freeze method in a code sample for the DrawingImage class. The comment for it was "Freeze the DrawingImage for performance benefits."
The Freeze method also applies to the DrawingGroup class. Maybe give it a try?
A simple question - If I want to print a picture so it best fits the page in C#, do I have to scale it to the dimensions of the page myself ?
I've noticed the many good answers about how-to scale, I just want to know If I need to scale myself, as the scaling isn't a part of an image processing, it's only for the sake of the printing.
(a simple yes (if it's the answer) would do)
Edit:
Currently I'm scaling using:
e.Graphics.DrawImage(my_image, destRect, srcRect, GraphicsUnit.Pixel);
Whereas destRect is a rectangle of the dimensions of the wanted output, I've done a simple algorithm to set this destRect to optimal sizes while preserving the original aspect ratio. (btw I'm not happy with this simple scaling, as it lacks in Image quality, will probably update to something fancier if I must).
But I've wanted to know if there's some auto-scaling provided by the framework for printing purposes, I really don't want to re-invent this wheel..
I'm not sure if this is as simple as yes/no. I suspect that you must still use GDI+ and the Graphics object, so scaling is as simple as calling Graphics.DrawImage(...) on the graphics object for the printing device. Some printer drivers might support scaling the source automatically, though.