目录

说明

最近空余时间研究了一下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开源】图片编辑器,带贴图、滤镜、涂鸦等功能的更多相关文章

  1. 超好用的自带火焰图的 Java 性能分析工具 Async-profiler 了解一下

    如果你经常遇到 Java 线上性能问题束手无策,看着线上服务 CPU 飙升一筹莫展,发现内存不断泄露满脸茫然.别慌,这里有一款低开销.自带火焰图.让你大呼好用的 Java 性能分析工具 - async ...

  2. Java数据结构——带权图

    带权图的最小生成树--Prim算法和Kruskal算法 带权图的最短路径算法--Dijkstra算法 package graph; // path.java // demonstrates short ...

  3. Twproject Gantt – 开源的 JavaScript 甘特图组件

    Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...

  4. 带权图的最短路径算法(Dijkstra)实现

    一,介绍 本文实现带权图的最短路径算法.给定图中一个顶点,求解该顶点到图中所有其他顶点的最短路径 以及 最短路径的长度.在决定写这篇文章之前,在网上找了很多关于Dijkstra算法实现,但大部分是不带 ...

  5. LR实战之Discuz开源论坛——网页细分图结果分析(Web Page Diagnostics)

    续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场景(Controller),现在,终于到了LoadRunner性能测试结果分析(An ...

  6. Lodop如何设置预览后导出带背景的图,打印不带背景图

    Lodop中的ADD_PRINT_SETUP_BKIMG,可以加载上背景图,该背景图在预览的时候可以显示也可以不显示,打印可以打印出来也可以不打印出来.一般套打,都是不打印背景图的,比如一些快递的快递 ...

  7. 无向带权图的最小生成树算法——Prim及Kruskal算法思路

    边赋以权值的图称为网或带权图,带权图的生成树也是带权的,生成树T各边的权值总和称为该树的权. 最小生成树(MST):权值最小的生成树. 生成树和最小生成树的应用:要连通n个城市需要n-1条边线路.可以 ...

  8. C语言——无向带权图邻接矩阵的建立

    #include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...

  9. java数据结构----带权图

    1.带权图:要引入带权图,首先要引入最小生成树,当所有的边拥有相同的权值时.问题变得简单了,算法可以选择任意一条边加入最小生成树.但是当边有不同的权值时,需要用一些算法决策来选择正确的边. 2.带权图 ...

  10. 【原创】Mindjet Manager思维导图软件云服务功能的使用方法

        注:自己使用了mindjet manager来画思维导图已经有一段时间了,无疑mindjet manager的功能是很强大的,但是最近因为自己两台电脑都安装了mindjet manager,每 ...

随机推荐

  1. TODO:Laravel增加验证码

    TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...

  2. bootstrap-fileinput 简单使用

    bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件,简单示例代码: <!DOCTYPE html> <html> <head> ...

  3. Http请求

    HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文 一个HTTP请求报文由请求行(request line ...

  4. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...

  5. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  6. python 数据类型 --- 集合

    1. 注意列表和集合的区别 set 列表表现形式: list_1 = [1,3,4];  集合表现形式:set_1= set() list_1 = [1,2,3,4,23,4,2] print(lis ...

  7. 用django创建一个项目

    首先你得安装好python和django,然后配置好环境变量,安装python就不说了,从配置环境变量开始 1.配置环境变量 在我的电脑处点击右键,或者打开 控制面板\系统和安全\系统 -> 左 ...

  8. Java获取本机的IP与MAC地址

    有些机器有许多虚拟的网卡,获取IP地址时会出现一些意外,所以需要一些验证: // 获取mac地址 public static String getMacAddress() { try { Enumer ...

  9. BZOJ 3110: [Zjoi2013]K大数查询 [树套树]

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6050  Solved: 2007[Submit][Sta ...

  10. Yeoman 学习笔记

    yoeman 简介:http://www.infoq.com/cn/news/2012/09/yeoman yeoman 官网: http://yeoman.io/ yeoman 是快速创建骨架应用程 ...