Silverlight开发历程—(绘制矢量图之Polyline 和 Polygon)

 Polyline(多线段) 和 Polygon(多边形)

 Polyline(多线段) 和 Polygon(多边形)是Silverlight中简单但功能强大的绘图对象。它允许你声明N个Points属性值,然后根据Points属性的坐标先后顺序来绘制图形,并且支持线条内部的颜色填充。

首先介绍一下PolyLine,他比Line元素更加强大,下面例子利用Polyline来绘制线条:

<Polyline Stroke="Black" Points="0,0 50,50 300,0 400,100"></Polyline>


运行结果:

代码中Points="0,0 50,50 300,0 400,100“ 总共分成了四对坐标然后根据四个点来绘制图形。

下面的例子来 说明Polyline(多线段) 和 Polygon(多边形)两个的用法和区别

        <!-- 三组坐标组成的PolyLine开放图形-->
        <Polyline Stroke="Blue" StrokeThickness="6" Points="50,50 150,200 300,50" Fill="Gold"></Polyline>
        <!-- 三组坐标组成的Polygon封闭图形-->
        <Polygon Stroke="Blue" StrokeThickness="6" Points="400,50 650,200 800,50" Fill="Gold"></Polygon>

运行结果:

上面例子分别利用Polyline(多线段) 和 Polygon(多边形)来绘制图型,然后除了坐标了不一样,其它的基本上都相同并且都填充了相同的颜色,唯一区别是

我们利用Polygon绘制出来的图形是一个封闭的图形。

Polyline(多线段) 和 Polygon(多边形)均具有FillRule(填充规则)使用FillRule可以声明线条内的填充规则。如下面的例子:

<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
                <!--EvenOdd 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,
                    然后计算该射线在给定形状中因交叉而形成的路径段数。 如果此数目为奇数,则该点在内部;如果是偶数,则该点在外部。  
            Nonzero 确定一个点是否位于路径填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后检查形状段与该射线的交点。
                    从零开始计数,每当线段从左向右穿过该射线时加 1,而每当路径段从右向左穿过该射线时减 1。 
                    计算交点的数目后,如果结果为零,则说明该点在路径外部。 否则,说明该点位于路径内部。-->

        <Polygon Stroke="Blue" StrokeThickness="2" Fill="Orange" Margin="120,0,60,0" FillRule="EvenOdd"
                 Points="15,200 68,70 110,200 0,125 134,125"></Polygon>

        <Polygon Stroke="Blue" StrokeThickness="2" Fill="Red" Margin="50,0,0,0" FillRule="Nonzero"
                 Points="15,200 68,70 110,200 0,125 134,125"></Polygon>
    </StackPanel>


运行结果:

 

分别使用了FillRule的两种规结果也不一样。


 

转载于:https://www.cnblogs.com/raphael5200/archive/2011/11/01/5114900.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 高德地图 API 提供了 `AMap.MouseTool` 类,可以用来绘制矢量图形。下面是一个简单的示例: ``` <template> <div id="map-container" style="height: 500px;"></div> </template> <script> export default { data() { return { map: null, mouseTool: null }; }, mounted() { // 加载地图 this.map = new AMap.Map('map-container', { zoom: 13, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点 }); // 创建 MouseTool 实例 this.mouseTool = new AMap.MouseTool(this.map); // 监听绘制事件 AMap.event.addListener(this.mouseTool, 'draw', e => { // 获取绘制矢量图形对象 const shape = e.obj; // 在地图上显示矢量图形 this.map.add(shape); }); }, methods: { // 开始绘制矢量图形 startDraw(type) { this.mouseTool[type](); } } }; </script> ``` 在上面的示例中,我们首先创建了一个地图实例并将其渲染到页面上。然后,我们创建了一个 MouseTool 实例,并在绘制事件中获取绘制矢量图形对象并将其添加到地图上。最后,我们提供了一个 `startDraw` 方法,用于开始绘制不同类型的矢量图形。 可以通过调用 `startDraw` 方法来开始绘制矢量图形。例如,要绘制一个圆形,可以在模板中添加一个按钮并将其与 `startDraw` 方法关联: ``` <template> <div> <div id="map-container" style="height: 500px;"></div> <button @click="startDraw('circle')">绘制圆形</button> </div> </template> ``` 这将在地图上启动圆形绘制工具。其他可用的绘制工具包括 `rectangle`(矩形)、`polygon`(多边形)和 `polyline`(折线)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值