折线(Polyline)、多边形(Polygon)

  • Polyline

Playline所绘制的图形由多个线段组成,因此它公开Points属性,它表示一系列坐标点的集合。这些点将用于描述Polyline图形中各线段相接处的顶点(包括起点和终点)。

Points集合在XAML中可以直接用字符串写上多个点,书写方法有两种:

  1. 每个坐标点之间使用至少一个空格开分隔,横坐标和纵坐标用英文的逗号分隔。
  2. 一个坐标点的横坐标与纵坐标用一个空格来分隔,这时候点与点之间就不能用单个空格来分隔了,因为这样书写会很混乱,编译器无法识别,因此点与点之间至少要用两个空格来分隔。

示例如下,折线的起点是(50,0),终点是(-50,100):

            <Polyline Stroke="SkyBlue" StrokeThickness="10" Width="260" Height="200"
                      Points="50,0 100,50 50,100 0,50 -50,100" Stretch="Uniform"/>

  • Polygon

与Polyline不同,Polygon会把折线段的起点与终点用一根直线连接起来,形成一个闭合的图形区域。

对于Polygon来说,无论Points集合中定义了多少个顶点,最后都会把起点与终点连接起来。

StrokeDashCap属性用来指定每一条线段的两个端点的形状,即锚点(线帽)的形状。例如下面示例中,将StrokeDashCap属性设置为Triangle,表示组成图形的线段的两端将呈现为三角形。StrokeDashCap属性的值由PenLineCap枚举提供。

            <Polygon Width="200" Height="200" Stroke="DeepPink" StrokeThickness="9"
                     Points="100,0 200,100 100,200 0,100" StrokeDashCap="Triangle" Stretch="Uniform"/>

 

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用高德地图 JavaScript API 中提供的绘制工具库来实现这些功能。以下是简单的封装实现: 1. 引入高德地图 JavaScript API 和绘制工具库: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> ``` 2. 定义绘制工具类: ```javascript class AMapDrawTool { constructor(map) { this.map = map; this.tool = new AMap.MouseTool(map); this.listeners = []; } addListener(eventType, handler) { this.listeners.push({ eventType, handler }); this.tool.on(eventType, handler); } removeListeners() { this.listeners.forEach(({ eventType, handler }) => { this.tool.off(eventType, handler); }); this.listeners = []; } drawRectangle() { this.tool.rectangle(); } drawCircle() { this.tool.circle(); } drawPolygon() { this.tool.polygon(); } drawMarker() { this.tool.marker(); } drawPolyline() { this.tool.polyline(); } } ``` 3. 创建地图实例和绘制工具实例: ```javascript const map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13, }); const drawTool = new AMapDrawTool(map); ``` 4. 添加绘制完成事件监听器并处理绘制结果: ```javascript drawTool.addListener('draw', (e) => { const overlay = e.obj; console.log('绘制完成', overlay); // 处理绘制结果 }); // 移除事件监听器 drawTool.removeListeners(); ``` 5. 调用绘制方法开始绘制: ```javascript drawTool.drawRectangle(); drawTool.drawCircle(); drawTool.drawPolygon(); drawTool.drawMarker(); drawTool.drawPolyline(); ``` 以上是一个简单的封装实现,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值