Code Monkey home page Code Monkey logo

skiaimageview's Introduction

SkiaImageView

SkiaImageView

Project Status: Active – The project has reached a stable, usable state and is being actively developed.

NuGet

Package NuGet
SkiaImageView.Wpf NuGet SkiaImageView.Wpf
SkiaImageView.Avalonia11 NuGet SkiaImageView.Avalonia11
SkiaImageView.Avalonia NuGet SkiaImageView.Avalonia
SkiaImageView.Xamarin.Forms NuGet SkiaImageView.Xamarin.Forms
SkiaImageView.Maui NuGet SkiaImageView.Maui

Japanese language

What is this?

A control for easy way showing SkiaSharp-based image objects onto UI applications. You can simply bind a SkiaSharp image object to Source property.

SKImageView is a control of SkiaSharp image drawing. You can manipulate same as with WPF's System.Windows.Controls.Image.

Supported SkiaSharp types are: SKBitmap, SKImage, SKPicture, SKDrawable and SKSurface.

XAML example:

<Window xmlns:siv="https://github.com/kekyo/SkiaImageView">
    <siv:SKImageView
        Stretch="Uniform"
        Source="{Binding PreviewImage}" />
</Window>
public sealed class ViewModel
{
    public SKBitmap? PreviewImage { get; set; }

    // ...
}

Fully sample code is here:

Regardless of which platform you use, the usage is almost identical.

Supported platform

WPF

  • .NET 7, 6, 5 (net7.0-windows, net6.0-windows, net5.0-windows)
  • .NET Core 3.1, 3.0 (netcoreapp3.1, netcoreapp3.0)
  • .NET Framework 4.8, 4.6.2 (net48, net462)
  • SkiaSharp: 2.80.0 or upper.

Avalonia

  • .NET 7, 6, 5 (net7.0, net6.0, net5.0)
  • .NET Core 3.1, 3.0, (netcoreapp3.1, netcoreapp3.0)
  • .NET Core 2.2, 2.1, 2.0 (netcoreapp2.2, netcoreapp2.1, netcoreapp2.0)
  • .NET Framework 4.8, 4.6.2 (net48, net462)
  • Avalonia 11:
    • Avalonia: 11.0.0 or upper
    • SkiaSharp: 2.88.3 or upper.
  • Avalonia (older):
    • Avalonia: 0.10.0 or upper
    • SkiaSharp: 2.80.0 or upper.

Xamarin Forms

  • .NET Standard 2.0 (netstandard2.0)
  • Xamarin Forms: 5.0.0.1874 or upper
  • SkiaSharp: 2.80.0 or upper.

.NET MAUI

  • .NET 7, 6 (net7.0, net6.0)
  • .NET MAUI: 6 or upper.
  • SkiaSharp: 2.88.0 or upper. (NOT 2.80.0, because the package contains some invalid type references.)

Available properties

Name Detail
Source SkiaSharp image related objects. See listed below.
Stretch Stretch enum value
StretchDirection StretchDirection enum value
RenderMode Rendering into back buffer by synchronous or asynchronous.

Source property

The Source property accepts the following SkiaSharp types:

Supported Type Aspect ratio from Note
SKBitmap Origin
SKImage Origin
SKPicture Measured RenderSize
SKDrawable Measured RenderSize
SKSurface Measured RenderSize
string Origin URL string for downloading content
Uri Origin URL for downloading content

Some types are drawn with aspect ratio corresponding to the current measured RenderSize area. Therefore, to maintain the aspect ratio, the size must be explicitly controlled in XAML.

Note: If you specify a URL to display, the URL does NOT accept the WPF resource format. (application: and pack: protocol based.)

RenderMode property

Choose rendering into back buffer by synchronous or asynchronous:

RenderMode Note
Synchronously All rendering process is synchronously.
AsynchronouslyForFetching Defaulted, Will operate asynchronously when giving URL in Source property (string or Uri).
Asynchronously All rendering process is asynchronously.

AsynchronouslyForFetching is defaulted. Because, when set to Asynchronously, all instances given to Source must not be implicitly modified. Maybe, this constraint can be difficult to achieve on your project.

License

Apache-v2.

History

  • 1.5.0:
    • Supported Avalonia 11.
  • 1.4.0:
    • Supported .NET MAUI. (Tested on 6.0.547).
  • 1.3.0:
    • Supported Avalonia platform (>= 0.10.0).
    • Downgraded Xamarin Forms package version (>= 5.0.0.1874).
  • 1.2.0:
    • Fixed misconfigured bitfield of RGBA on Xamarin Forms.
    • Added ProjectionQuality property for Xamarin Forms (You can adjust final image quality when need to make better performance.)
  • 1.1.0:
    • Supported Xamarin Forms.
  • 1.0.1:
    • Downgraded SkiaSharp to 2.80.0 (Because known bug related.)
  • 1.0.0:
    • Reached 1.0.0 🎉
    • Fixed updating new image instance.
  • 0.4.0:
    • Added RenderMode features and supported StretchDirection.
    • Added sample code.
  • 0.3.0:
    • Fixed XAML namespace.
  • 0.2.0:
    • Fixed some problems, add WIP feature.
  • 0.1.0:
    • Initial release.

skiaimageview's People

Contributors

kekyo avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

watch-later wqxiaorao yangjieshao

skiaimageview's Issues

It seems something wrong with Stretch and StretchDirection

似乎 缩放有问题
(It seems something wrong with Stretch and StretchDirection)
Snipaste_2024-03-01_15-37-09

Code 
<Grid
	Background="GreenYellow"
	ColumnDefinitions="100,*,*,*"
	RowDefinitions="50,*,*,*,*">
	<Grid
		Grid.Row="0"
		Grid.Column="0"
		ColumnDefinitions="*,*">

		<Button
			Grid.Column="0"
			Height="30"
			Padding="5,5"
			HorizontalAlignment="Left"
			VerticalAlignment="Center"
			Command="{Binding Start}"
			Content="Start"
			Cursor="Hand"
			IsVisible="{Binding CancellationTokenSource, Converter={x:Static ObjectConverters.IsNull}}" />

		<Button
			Grid.Column="0"
			Height="30"
			Padding="5,5"
			HorizontalAlignment="Left"
			VerticalAlignment="Center"
			Command="{Binding Pause}"
			Content="Pause"
			Cursor="Hand"
			IsVisible="{Binding CancellationTokenSource, Converter={x:Static ObjectConverters.IsNotNull}}" />

		<Button
			Grid.Column="1"
			Height="30"
			Padding="5,5"
			HorizontalAlignment="Left"
			VerticalAlignment="Center"
			Command="{Binding Clean}"
			Content=" Clean"
			Cursor="Hand"
			IsVisible="{Binding Image, Converter={x:Static ObjectConverters.IsNotNull}}" />
	</Grid>
	<TextBlock
		Grid.Row="0"
		Grid.Column="1"
		HorizontalAlignment="Center"
		VerticalAlignment="Center"
		Text="Both" />
	<TextBlock
		Grid.Row="0"
		Grid.Column="2"
		HorizontalAlignment="Center"
		VerticalAlignment="Center"
		Text="UpOnly" />
	<TextBlock
		Grid.Row="0"
		Grid.Column="3"
		HorizontalAlignment="Center"
		VerticalAlignment="Center"
		Text="DownOnly" />

	<TextBlock
		Grid.Row="1"
		Grid.Column="0"
		HorizontalAlignment="Left"
		VerticalAlignment="Center"
		Text="None" />
	<TextBlock
		Grid.Row="2"
		Grid.Column="0"
		HorizontalAlignment="Left"
		VerticalAlignment="Center"
		Text="Fill" />
	<TextBlock
		Grid.Row="3"
		Grid.Column="0"
		HorizontalAlignment="Left"
		VerticalAlignment="Center"
		Text="Uniform" />
	<TextBlock
		Grid.Row="4"
		Grid.Column="0"
		HorizontalAlignment="Left"
		VerticalAlignment="Center"
		Text="UniformToFill" />

	<siv:SKImageView
		Grid.Row="1"
		Grid.Column="1"
		Source="{Binding Image}"
		Stretch="None"
		StretchDirection="Both" />

	<siv:SKImageView
		Grid.Row="1"
		Grid.Column="2"
		Source="{Binding Image}"
		Stretch="None"
		StretchDirection="UpOnly" />

	<siv:SKImageView
		Grid.Row="1"
		Grid.Column="3"
		Source="{Binding Image}"
		Stretch="None"
		StretchDirection="DownOnly" />

	<siv:SKImageView
		Grid.Row="2"
		Grid.Column="1"
		Source="{Binding Image}"
		Stretch="Fill"
		StretchDirection="Both" />

	<siv:SKImageView
		Grid.Row="2"
		Grid.Column="2"
		Source="{Binding Image}"
		Stretch="Fill"
		StretchDirection="UpOnly" />

	<siv:SKImageView
		Grid.Row="2"
		Grid.Column="3"
		Source="{Binding Image}"
		Stretch="Fill"
		StretchDirection="DownOnly" />

	<siv:SKImageView
		Grid.Row="3"
		Grid.Column="1"
		Source="{Binding Image}"
		Stretch="Uniform"
		StretchDirection="Both" />

	<siv:SKImageView
		Grid.Row="3"
		Grid.Column="2"
		Source="{Binding Image}"
		Stretch="Uniform"
		StretchDirection="UpOnly" />

	<siv:SKImageView
		Grid.Row="3"
		Grid.Column="3"
		Source="{Binding Image}"
		Stretch="Uniform"
		StretchDirection="DownOnly" />

	<siv:SKImageView
		Grid.Row="4"
		Grid.Column="1"
		Source="{Binding Image}"
		Stretch="UniformToFill"
		StretchDirection="Both" />

	<siv:SKImageView
		Grid.Row="4"
		Grid.Column="2"
		Source="{Binding Image}"
		Stretch="UniformToFill"
		StretchDirection="UpOnly" />

	<siv:SKImageView
		Grid.Row="4"
		Grid.Column="3"
		Source="{Binding Image}"
		Stretch="UniformToFill"
		StretchDirection="DownOnly" />
</Grid>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.