用javascript画多边形，然后鼠标点击某个顶点可以拖动，改变多边形形状

Wenson。王 2016-12-29 11:12:48

用javascript画多边形，然后鼠标点击某个顶点可以拖动，改变多边形形状，求大神指导该怎么做？？？

...全文

664 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

m0_37319443 2017-01-12

打赏
举报

回复

你好，请问你做出来了吗

天际的海浪 2017-01-12

打赏
举报

回复

这个在类似的功能 http://blog.csdn.net/jslang/article/details/37991517

多边形 Google Maps API的扩展，允许用户创建和管理多边形。它提供了易于编辑的形状，点捕捉等功能。为什么要扩展？ Google Maps API是一个很棒的工具，但是我们发现，即使与绘图工具结合使用，它也无法满足我们的需求。我们需要的两个主要功能是：每个边缘中间的一个虚构点，以使形状易于编辑将点捕捉到其他多边形的顶点的可能性当您将“ 与“ ”结合，第一个功能将被覆盖。事实证明，由于拖动可编辑形状的点时（几乎）所有事件都将被忽略，因此无法使用标准的Google工具来实现点捕捉。用法该扩展程序是使用经典继承编写的（然后从那里继承源代码），因此可以与Google Maps API相同的方式使用。有关其提供的更多信息，请参见演示。真的很简单，而还有些先进。依存关系显然...就是这样！

单张尺寸可编辑基于以下类别的度量标记，圆，矩形，折线，多边形的类原料药 Leaflet-Editable-Measures可以完全扩展。您可以通过三种方式自定义行为：使用选项，侦听事件或扩展。地图 Leaflet-Editable-Measures将事件添加到L.Map对象。发生事件时，被调用函数将使用包含以下属性的参数： e-原始事件；测量者-测量者，控制被测层；层-被测层; layerType-图层的类型。 layerType可以包含以下值：记号笔圆圈长方形折线 多边形 大事记活动名称用法措施：移动在创建之前（选择标记点，圆形，矩形，折线，多边形）的第一个顶点触发鼠标移动。测量：创建创建图形时触发（添加第一个和第二个顶点，拖动Circle或Rectangle顶点）。措施：创建创建图形时触发（鼠标单击，单击标记，单击最后一个折线

Path.Drag.js 向小叶路径（多边形，折线，矩形，圆形，CircleMarker…）添加拖动功能。例子安装此库需要Leaflet版本1.0或更高版本在JavaScript文件中包含Path.Drag.js （包括Leaflet本身之后）。可通过NPM获得： npm install leaflet.path.drag 用法 dragging处理程序将附加到地图的路径实例。要启用拖动，只需执行以下操作： layer.dragging.enable() 禁用： layer.dragging.disable() 如果您希望在将路径添加到地图后立即将其draggable: true在其选项中添加draggable: true ： const layer = L.polygon([…], {draggable: true}) 备择方案：：如果要拖动具有很多顶点的非

InteractiveSVG.js 用于快速生成交互式SVG的库完成了可拖动点由可拖动端点定义的线由隐藏端点定义的线带可拖动中心的圆半径取决于点的圆三点定义的圆二次贝塞尔曲线三次贝塞尔曲线静态点静态线静态圆去做可拖动的线中心可拖动的多边形 具有可拖动顶点的多边形

文章目录前言一、通用代码封装二、canvas类的封装1.定义类2.初始化3.初始化鼠标事件3.鼠标事件处理4.绘制多边形及顶点总结前言本文主要介绍如何通过鼠标点击绘制任意多边形，以及通过鼠标移动改变多边形的形状一、通用代码封装 class Point { constructor(opts = {}) { this.x = opts.x || 0; this.y = opts.y || 0; } } const

87,914

社区成员

224,620

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章