草庐IT

多边形绘制

全部标签

javascript - 如何在 FF 和 IOS 中使用 clip-path 多边形

我尝试编写一个小插件,以更有机的方式打开模式框,因此我决定为clip-path属性设置动画。现在这段代码只适用于chrome:http://codepen.io/meodai/pen/GgGzYo?editors=011看起来像firefoxdoesnotsupportpolygon()在clip-path属性中。Safari和MobileSafari也在努力解决这个问题。有没有一种类似的简单方法可以在Firefox和Safari以及MobileSafari中进行这项工作?知道如何解决这个问题吗?这是一个工作示例:var$ov=$('.overlay');$(document).on(

javascript - 如何在不使用 Leaflet.draw UI 的情况下单击按钮并开始新的多边形

我正在纠结的是如何在不使用Leaflet.drawUI的情况下单击按钮并开始一个新的多边形。例如$('#draw_poly').click(function(){});我可以毫无问题地将现有多边形置于编辑模式。$('.edit_polygon').click(function(){varname=$(this).text();geojson_layer.eachLayer(function(layer){if(name==layer.feature.properties.name){layer.editing.enable();}});returnfalse;});感谢JacobToy

javascript - 传单绘制插件 : How to hide/show drawing tools by Layer Type dynamically

我在项目中使用绘图插件,我想知道如何按图层类型隐藏/显示绘图工具?例如,假设我有2个图层,其中一个类型是多边形,另一个是线。如果用户选择多边形层,我想隐藏画线工具。之后,如果用户选择线层,我想隐藏多边形绘图工具。我看过here但是这个例子使工具成为静态的,我想动态地改变。我该怎么做?我们将不胜感激。 最佳答案 我自己解决了。我在map初始化时添加了这个绘制控件。drawControl=newL.Control.Draw({draw:{position:'topleft',polygon:false,polyline:false,re

javascript - 如何确定浏览器何时完成插入元素的绘制?

我有一个网页正在注入(inject)通过AJAX传送的HTML。先验我不知道内容的大小,但我需要根据内容的大小在页面上定位内容。这是一个不起作用的简单方法:将父容器的不透明度设置为0。将内容插入DOM。测量尺寸,例如$el.outerWidth(true)。根据这些尺寸定位内容。将父容器的不透明度(背面)设置为1.0。这种方法的问题在于内容非常复杂并且包含图像。调用outerWidth()时,浏览器尚未完成重新绘制屏幕,​​因此返回的尺寸不准确。(有趣的是,在我的例子中,初始尺寸总是明显大于最终值,而不是我预期的0。)我可以通过在第2步和第3步之间设置一个计时器来减少这个问题,但是无论

javascript - 查找点属于哪个六边形的高效算法

我试图从以下方面找到一种更有效的方法来确定一个点属于哪个六边形:一组点-为了论证,10000点。一组六边形的中心点,大约1000个六边形。每个点都属于一个六边形,一些(大多数)六边形是空的。六边形形成一个完美的网格,一个六边形的点从左上角开始(它将与总面积的边缘重叠)。我目前的解决方案有效,但相当慢n*(mlogm)我认为,其中n=length(points)和m=length(六边形)。我怀疑我可以做得比这好得多,想到的一个解决方案是根据点和六边形到某个任意点(可能是中间,可能是Angular)的距离对点和六边形进行排序(仅一次),然后迭代在这些点和六边形的子集上,从第一个六边形到该

javascript - 将弱简单多边形拆分为真正的简单多边形或多边形

我想将弱简单多边形划分为简单多边形。背景用例是使用JavascriptClipper来简化已简化(联合)的多边形。.JavascriptClipper以及originalClipper'sSimplifyPolygon()函数去除自相交并合并公共(public)边,但它不能产生真正的简单多边形。输出用于three.js,其中有TriangulateShapes()这需要多边形很简单。Three.js接受具有一个轮廓和零个或多个孔的多边形结构。输入,弱简单多边形弱简单多边形不能有连续重复顶点(真正的重复点),也不能有孔(岛)或自相交(边与其他边交叉),但可以有非连续多顶点(顶点恰好具有相

Javascript 库 - 如何绘制家谱组织图或流程图?

我正在寻找一个简单的Javascript库(svg?),它允许我绘制家谱关系。我在谷歌上搜索了很多,发现了很多有趣的库,比如Raphaël及其扩展Dracula。Google也有自己的库来制作流程图。不幸的是,每个库都用单行在节点之间建立关系。如果A和B与C有关系,我将获得2行:一条从A到C,一条从B到C。我需要的是一条从A到B的线(我们称之为AB)和一条从AB到C的线来代表A和B的婚姻。示例(来源:example-image):谢谢。 最佳答案 我遇到了同样的问题。这是我发现的:http://astuteo.com/slickma

javascript - React 传单绘制 - 缺少标记图标和拖动处理程序

我正在使用Reactleafletdraw来绘制多边形和圆形。但是当我选择编辑多边形时,没有用于移动和调整大小的拖动处理程序。如果有人遇到同样的问题,如何解决?这是代码this.handleAreaSelection(event)}boxZoom={false}ref={map=>{this.map=map}}center={this.props.center}zoom={this.props.zoom}minZoom={this.props.minZoom}maxZoom={this.props.maxZoom}attributionControl={false}doubleClic

javascript - 在 HTML canvas 上一条接一条地绘制连续的线条

我正在尝试为上述问题编写代码。我试着找到解决办法。这是我目前拥有的。varcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');vardrawColorLine=function(start,end,color){vardeltaX,deltaY,i=0,currLength=0,isHor,isVert;deltaX=end[0]-start[0];deltaY=end[1]-start[1];context.strokeStyle=color;isHor=deltaX===0?0:1;

javascript - 将字节转换为图像以在 HTML5 Canvas 上绘制

有人知道我如何将通过websocket(从C#应用程序)发送的字节转换为图像吗?然后我想在Canvas上绘制图像。我可以看到两种方法:以某种方式在Canvas上以字节形式绘制图像而不进行转换它。然后在javascript中以某种方式将字节转换为base64字符串画画。这是我接收绘图字节的函数:functiondraw(imgData){varimg=newImage();img.onload=function(){cxt.drawImage(img,0,0,canvas.width,canvas.height);};//WhatIwasusingbefore...img.src="da