win10 uwp 绘图 Line 控件使用

本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

虽然是一个简单控件,但是可以做出很诡异的很好看的UI。

首先,我们要知道,Line就是画直线。当然我们画他一般是在Canvas中。

我们先在一个页面新建一下,写下必要的代码。

       <Grid Margin="10,10,10,10">
            <Canvas>
                
            </Canvas>
        </Grid>

首先我们需要确定直线坐标,用X1X2,Y1Y2来获得两个点,也就是直线。

 <Line X1="0" X2="200" Y1="10" Y2="200"></Line>

有了直线,可以在设计看到一条线,但是运行是没有看到的,因为我们没有给线大小。

Stroke就是线段设置颜色或用其他渐变填充,StrokeThickness就是线段的大小

我们写上Stroke="Black" StrokeThickness="5"

如果我们把大小写为50,那么就会看到很不好看

于是我们想要裁剪他,裁剪可以用Clip

我们用矩形来裁剪他。

矩形需要四个点。

可以看到线段裁剪了

被一个大小为150的矩形裁剪了

接着就是ms-uap 写的 http://www.cnblogs.com/ms-uap/p/4641419.html

我们给他一个StrokeDashArray,这个值就是很多数,奇数的数就是显示宽度,偶数的就是不显示的宽度,读到最后的数就循环到最前。我们设置一个0.1一个0.2就会显示0.1的宽度,然后空0.2再显示0.1

               <Line X1="0" X2="200" Y1="10" Y2="200"
                      Stroke="Black" StrokeThickness="50"
                      StrokeDashArray="0.1 0.2">
                    <Line.Clip>
                        <RectangleGeometry Rect="0 0 150 150"></RectangleGeometry>
                    </Line.Clip>
                </Line>

需要知道,0.1的宽度是0.1*StrokeThickness的宽度

我们把宽度大一些

然后加个线条,就可以做出ms-uap写的图

我们还可以设置线段的开始图形,要知道,我们线段画比较大,那么看起来就是矩形,StrokeStartLineCap就可以让线段看起来好看

StrokeStartLineCap="Round"
StrokeStartLineCap="Triangle"

线段两头尖的画法就是在设置后面的StrokeEndLineCap


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

2959
来自专栏菜鸟计划

CSS布局(三) 布局模型

布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) ...

3136
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

1925
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

1114
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3324
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1063
来自专栏编程

【CSS】格仔背景

CSS代码 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } bod...

24210
来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

863
来自专栏jiajia_deng

Qt 用画笔对图片实现马赛克效果

最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意...

2031
来自专栏恰同学骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

1183

扫码关注云+社区