uwp如何建立任何形状的头像，如圆形，方形，六边形等

最近掌上英雄联盟更新了新的界面，其中“我”界面的更新比较大，我目前还在加紧跟进。在做这个界面的时候，这个头像我想了一下，其实挺好解决的。先上个原图

这个头像一开始我也完全找不到头绪，然后我把头像放大了一下，其实这个头像是用一个园减去一个三角形做出来的，本来我想用路径语法直接画出这样一个图形出来，但是好像有点难，不过我们用VS编程的有一个特殊的工具，Blend for vs。这里可以先画出图形然后自动生产Path。下面介绍一下详细操作。

我们打开blend，先在界面上画一个圆，我个人比较喜欢用代码控制

<Ellipse Width="100" Height="100" Fill="Green"/>

然后画这样一个图形

 <Polygon Points="0,0 0,10 7,17 14,10 14,0" Fill="Red"/>

为什么画这个图形呢，因为要把圆的上面一部分全部遮掉啊！

好了，不多说，我们把两个图形叠到一起。

<Polygon Points="0,0 0,10 7,17 14,10 14,0" Fill="Red"><Polygon.RenderTransform><TranslateTransform X="173" Y="21"/></Polygon.RenderTransform></Polygon>

像这样，给三角形平移一下，我这里没有去严格对齐了，控制代码可以严格对齐

最后的操作到了

相减完后，软件会自动给我们生成Path路径

像这样的

     <Path Data="M43,0 L43,0.509874 L50,7.50987 L57,0.509874 L57,0 L57.6145,0.085987 C81.6148,3.75316 100,24.4845 100,49.5099 C100,77.1241 77.6142,99.5099 50,99.5099 C22.3858,99.5099 1E-06,77.1241 0,49.5099 C1E-06,24.4845 18.3852,3.75316 42.3855,0.085987 z" Fill="Green" />

到这里差不多就完结了，最后只需要给Path的Fill设置成ImageBrush就行了

看我的

<Button HorizontalAlignment="Center"><Button.Template><ControlTemplate><Grid><Image Height="100" Source="ms-appx:///Resources2/game_header_frame.png"/><Path Data="M53,0 L53.9368,0.203946 C73.4514,4.7087 88,22.194 88,43.0772 C88,67.3778 68.3005,87.0772 44,87.0772 C19.6995,87.0772 0,67.3778 0,43.0772 C0,22.9534 13.5097,5.98485 31.9545,0.746407 L33,0.463481 L33,0.577242 L43,10.5772 L53,0.577242 z"><Path.RenderTransform><TranslateTransform X="6.5" Y="6"/></Path.RenderTransform><Path.Fill><ImageBrush ImageSource="ms-appx:///Resources/headimages/profileIcon1234.jpg"/><!--想要更换图片只需要用TemplateBinding绑定到一个自定义附加属性就可以了--></Path.Fill></Path></Grid></ControlTemplate></Button.Template></Button>

最后上个效果图

最后的最后，打广告啦

gayhub:https://github.com/hei12138/MyLOL

有任何问题请联系1329698854@qq.com

同时欢迎一起交流

转载于:https://www.cnblogs.com/hei12138/p/5824127.html

uwp如何建立任何形状的头像，如圆形，方形，六边形等相关推荐

练练手：建立一个形状类Shape作为基类，派生出圆类Circle和矩形类Rectangle，求出面积并获取相关信息。
这个简单的小程序是对类的继承做的一个小巩固要求如下: (1)形状类Shape (a)保护数据成员 double x,y:对于不同的形状,x和y表示不同的含义,如对于圆,x和y均表示圆的半径,而对于矩 ...
android 动态矩形条,android – 从相机中动态检测不同形状(圆形,方形和矩形)？
更新:这个StackOverflow帖子(包含一些很好的样本图片)似乎至少解决了你的问题的 circles detection部分.他指出的优秀文章的参考资料可以在 wiki page上找到(不幸的是 ...
C# 获取指定 “QQ头像“ 绘制 “圆形头像框“GDI(Graphics)
效果图: 完全代码(下方有详细解读) private void textBox1_TextChanged(object sender, EventArgs e){//这里是文本框的事件值发生改变时 ...
php 微信头像圆形,微信头像生成圆形邀请卡
微信接口获取用户信息,返回的用户头像是132x132的jpeg图片. 用cURL下载微信头像,然后var_dump(getimagesize($avatar)); 结果 array(7) { [0]= ...
上传头像时圆形裁剪框
上传头像到服务端时需要将图片裁剪,项目中用到的是圆形的裁剪框,先看效果: 代码实现如下: public class ClipImageBorderView extends View { /** * 水 ...
html img 圆头像_html圆形头像简易实现
html圆形头像简易实现 html圆形头像简易实现 html圆形头像简易实现效果如下代码如下原型头像样式实现 * { padding: 0px; margin: 0px; } html,body ...
cocos creator shader 方形头像变为圆形头像
将方形头像转变为圆形头像我起初的思路就是,先在一个图片上绘制一个在中心点带颜色的圆: 1:如果uv坐标在圆内的话就会和图片的颜色进行混合只不过混合的时候,带颜色的圆的插值为0,图片的插值为1 2:如果 ...
圆头像微信小程序绘图_[微信小程序]授权头像修改圆形
"#[一如分算需上来处一定迹面数一跳这件我子作微信小程序]授权头新直能分支调二浏页器朋代说,事刚需求像修改圆形" 一. .wxml .wxss .userinfo-avatar { ...
app中头像，圆形图片
今天写项目的时候,遇到了这个东西,写完了,就在记录一份,其实不难. 下面是真相: 其实关键代码就一个方法: /*** 圆形的图片*/private void roundPic() {//这一张图是要进 ...

uwp如何建立任何形状的头像，如圆形，方形，六边形等

uwp如何建立任何形状的头像，如圆形，方形，六边形等相关推荐

最新文章

热门文章