【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可以自己去设计,底图旋转,剪切功能没有完善,如果需要用得着的童鞋自己实现一下即可,不费力。
【UWP开源】图片编辑器,带贴图、滤镜、涂鸦等功能的更多相关文章
- 超好用的自带火焰图的 Java 性能分析工具 Async-profiler 了解一下
如果你经常遇到 Java 线上性能问题束手无策,看着线上服务 CPU 飙升一筹莫展,发现内存不断泄露满脸茫然.别慌,这里有一款低开销.自带火焰图.让你大呼好用的 Java 性能分析工具 - async ...
- Java数据结构——带权图
带权图的最小生成树--Prim算法和Kruskal算法 带权图的最短路径算法--Dijkstra算法 package graph; // path.java // demonstrates short ...
- Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...
- 带权图的最短路径算法(Dijkstra)实现
一,介绍 本文实现带权图的最短路径算法.给定图中一个顶点,求解该顶点到图中所有其他顶点的最短路径 以及 最短路径的长度.在决定写这篇文章之前,在网上找了很多关于Dijkstra算法实现,但大部分是不带 ...
- LR实战之Discuz开源论坛——网页细分图结果分析(Web Page Diagnostics)
续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场景(Controller),现在,终于到了LoadRunner性能测试结果分析(An ...
- Lodop如何设置预览后导出带背景的图,打印不带背景图
Lodop中的ADD_PRINT_SETUP_BKIMG,可以加载上背景图,该背景图在预览的时候可以显示也可以不显示,打印可以打印出来也可以不打印出来.一般套打,都是不打印背景图的,比如一些快递的快递 ...
- 无向带权图的最小生成树算法——Prim及Kruskal算法思路
边赋以权值的图称为网或带权图,带权图的生成树也是带权的,生成树T各边的权值总和称为该树的权. 最小生成树(MST):权值最小的生成树. 生成树和最小生成树的应用:要连通n个城市需要n-1条边线路.可以 ...
- C语言——无向带权图邻接矩阵的建立
#include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...
- java数据结构----带权图
1.带权图:要引入带权图,首先要引入最小生成树,当所有的边拥有相同的权值时.问题变得简单了,算法可以选择任意一条边加入最小生成树.但是当边有不同的权值时,需要用一些算法决策来选择正确的边. 2.带权图 ...
- 【原创】Mindjet Manager思维导图软件云服务功能的使用方法
注:自己使用了mindjet manager来画思维导图已经有一段时间了,无疑mindjet manager的功能是很强大的,但是最近因为自己两台电脑都安装了mindjet manager,每 ...
随机推荐
- EasyMesh - A Two-Dimensional Quality Mesh Generator
EasyMesh - A Two-Dimensional Quality Mesh Generator eryar@163.com Abstract. EasyMesh is developed by ...
- Syscan360会议胸牌破解揭秘
Syscan360会议胸牌破解揭秘 背景 有幸参加今年11月份的上海Syscan360安全会议,会议期间有一个亮点就是360的独角兽团队设计了一款电子badge(胸牌)供参加人员进行破解尝试,类似于美 ...
- 关于全局ID,雪花(snowflake)算法的说明
上次简单的说一下:http://www.cnblogs.com/dunitian/p/6041745.html#uid C#版本的国外朋友已经封装了,大家可以去看看:https://github.co ...
- .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?
配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.要了解配置同步机制的实现原理,先得从认识一个 ...
- Discuz NT 架构剖析之Config机制
接触了Discuz NT! 一段时间了,是时候做个总结了,标题好霸气,有木有? 都是托园子里的大牛代振军的福啊,哈哈哈哈. 首先论坛的信息不是完全存储在数据库里面的,一部分信息存储在config文件里 ...
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- yaf的简单入门
1.目录结构: 2.入口文件 入口文件是所有请求的入口,一般都借助于rewrite规则,把所有的请求都重定向到这个入口文件. 一个经典的入口文件 public/index.php 3.重写规则 需要 ...
- 【干货分享】流程DEMO-付款申请单
流程名: 付款申请单 业务描述: 包括每月固定开支.固定资产付款.办公用品付款.工资发放.个人所得税缴纳.营业税缴纳.公积金.社保缴纳和已签订合同的按期付款,最后是出纳付款,出纳核对发票. 流程发起 ...
- Xamarin Android 应用程序内图标上数字提示
最近在用 Xamarin 做一个 Android 应用,打开应用时,如果有新消息,需要在应用内的 Toolbar 或者首页的图标上显示数字提示.在这里和大家分享一下实现方法,如果你有更新好的实现方法, ...
- 关于Linux和Windows下部署mysql.data.dll的注册问题
mysql ado.net connector下载地址: http://dev.mysql.com/downloads/connector/net/ 选择版本: Generally Available ...