【UWP开源】图片编辑器,带贴图、滤镜、涂鸦等功能

简介:

目录

 

说明

最近空余时间研究了一下Win2D,它能为我们在UWP中提供一种类似GDI那样的绘图方法。就像传统Winform、MFC中那样重写OnPaint相关的方法,然后调用DrawLine绘制一条直线。有了它的帮助,我们可以在UWP中创建复杂的UI,听起来是不是很爽呢?

本文源码地址:https://github.com/sherlockchou86/ImageEditor.UWP

 

功能

主要功能已经完成,主要包括:

  • edit local and remote(net) images;
  • select layout(1:1 3:4 4:3), select backcolor for canvas, rotate and crop the background image;
  • tune brightness, degree of fuzzy and degree of sharpening;
  • add stickers onto canvas(download templates from internet);
  • apply a kind of filters(8 filters supported);
  • add tags such as location, @friends, adn etc;
  • draw on the canvas, you can select pen-size, pen-color(image) which you like;
  • save the canvas as a BitmapImage object, which you can directly use.

Note:

- 贴纸是根据自定义的json文件,自动从网上下载的。也就是说,贴纸不是固定不变的,你可以随时修改json文件,随时更新贴纸模板。详细json格式参见下面;

- 源码中我并没有创建单独的Library,你如果需要封装成独立的库,只需要创建一个Library Project,然后将'Controls', 'DrawingObjects', 'Images', 'Resources' and 'Tools' 目录拷贝到新建的Project中去即可,注意必要时需要修改NS。

下面是下载贴纸的json文件范例:

 

实现原理

其实原理相当简单,熟悉gdi绘图的人很容易理解:

- 绘制直线

graphics.DrawLine((float)Left, (float)(Top + (Height / 3)), (float)(Left + Width), (float)(Top + Height / 3), Colors.Orange, 0.3f, style);

- 填充圆形

graphics.FillCircle((float)Left, (float)Top, radius, DrawColor);

- 关于滤镜效果

Win2D中有现成的滤镜类,只需要传入Image,设置相关属性,那么返回来的便是滤镜效果。每种效果都是一个ICanvasImage,直接将其Draw在UI上或者一个CanvasBitmap上即可。

- 关于代码结构 

  

可以看到,代码中创建了许多的DrawingObject类型,熟悉gdi的童鞋们相比已经知道什么情况了。

 

使用方法

 关于控件的使用方法,就更简单了。参见下面代码:

分三步:

- 创建一个ImageEditor的对象;

- 调用它的Show方法,给它传递StorageFile或者Uri参数;

- 注册它的ImageEditedCompleted事件,接收编辑完成的Image。

 

几张截图

几张截图,大部分是PC上的,手机上也适用。界面太糙,UI可以自己去设计,底图旋转,剪切功能没有完善,如果需要用得着的童鞋自己实现一下即可,不费力

作者:周见智 
出处:http://www.cnblogs.com/xiaozhi_5638/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类:  UWP

本文转自周见智博客博客园博客,原文链接:http://www.cnblogs.com/xiaozhi_5638/p/5603681.html,如需转载请自行联系原作者
目录
相关文章
|
1月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
5月前
|
Shell Linux Apache
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
849 0
|
6月前
|
设计模式 Java 数据库连接
只要100行代码,实现文本编辑器中的草稿箱功能
大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱、撤销等操作。下面用一段代码来实现一个这样的功能。假设,我们在GPer社区中发布一篇文章,文章编辑的过程需要花很长时间,中间也会不停地撤销、修改,甚至可能要花好几天才能写出一篇精品文章,因此可能会将已经编辑好的内容实时保存到草稿箱。
59 1
|
6月前
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
111 0
|
5月前
|
算法 vr&ar 图形学
GLTF编辑器告诉你凹凸贴图的作用
凹凸贴图在计算机图形学中被广泛应用于各种领域,以增加图形的真实感和细节。它能够提供更加逼真的视觉效果,使观众或用户能够更好地沉浸在虚拟的世界中。
253 0
|
4月前
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
|
5月前
|
Linux 开发者 Windows
|
5月前
|
图形学 流计算
GLTF编辑器教你区分自发光贴图和光照贴图
自发光贴图主要用于模拟物体表面的发光效果,突出特定区域或绘制发光字体等。而光照贴图则用于模拟场景中光源的间接照明效果,提高渲染效率和实现真实的光照效果
275 0
|
6月前
|
Linux C++ 开发者
国产开源编辑器Notepad--,誓要替换掉Notepad++
国产开源编辑器Notepad--,誓要替换掉Notepad++
471 0
|
6月前
|
Web App开发 数据采集 人工智能

相关产品

  • 云迁移中心