天道酬勤,学无止境

Drawing line in a div with Javascript

With a canvas you can draw a line with javascript like this,

<html>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</html>

How can i do the same thing, but by using a div tag instead of a canvas? The reason i want to do this is beacuse the canvas does not seem to work on IE and i know that Google graphs make use of div tags and not canvases to draw graphs, so it might be possible.

I tried replacing the canvas with a div, but it does not work.

评论

Using Jquery:

<div id='rPaper'></div>

Jquery

 x1 = 50, y1 = 50,
 x2 = 350, y2 = 50;
 drawnode(x1, y1);
 drawnode(x2, y2);
 drawline(x1, y1, x2, y2);


 function drawnode(x, y) {

     var ele = ""
     var style = "";
     style += "position:absolute;";
     style += "z-index:100;"
     ele += "<div class='relNode' style=" + style + ">";
     ele += "<span> Test Node</span>"
     ele += "<div>"

     $('#rPaper').show();
     var node = $(ele).appendTo('#rPaper');
     var width = node.width();
     var height = node.height();

     var centerX = width / 2;
     var centerY = height / 2;

     var startX = x - centerX;
     var startY = y - centerY;

     node.css("left", startX).css("top", startY);

 }

 function drawline(ax, ay, bx, by) {
     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);


     if (ax > bx) {
         bx = ax + bx;
         ax = bx - ax;
         bx = bx - ax;
         by = ay + by;
         ay = by - ay;
         by = by - ay;
     }


     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);

     var angle = Math.atan((ay - by) / (bx - ax));
     console.log('angle: ' + angle);

     angle = (angle * 180 / Math.PI);
     console.log('angle: ' + angle);
     angle = -angle;
     console.log('angle: ' + angle);

     var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
     console.log('length: ' + length);

     var style = ""
     style += "left:" + (ax) + "px;"
     style += "top:" + (ay) + "px;"
     style += "width:" + length + "px;"
     style += "height:1px;"
     style += "background-color:black;"
     style += "position:absolute;"
     style += "transform:rotate(" + angle + "deg);"
     style += "-ms-transform:rotate(" + angle + "deg);"
     style += "transform-origin:0% 0%;"
     style += "-moz-transform:rotate(" + angle + "deg);"
     style += "-moz-transform-origin:0% 0%;"
     style += "-webkit-transform:rotate(" + angle + "deg);"
     style += "-webkit-transform-origin:0% 0%;"
     style += "-o-transform:rotate(" + angle + "deg);"
     style += "-o-transform-origin:0% 0%;"
     style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "z-index:99;"
     $("<div style='" + style + "'></div>").appendTo('#rPaper');
 }

Demo

// right top -> left bottom
    x1 = 850, y1 = 150,
    x2 = 550, y2 = 250;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

Demo

// right bottom -> left top
    x1 = 750, y1 = 150,
    x2 = 550, y2 = 50;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

Demo

// left top -> right bottom
    x1 = 150, y1 = 150,
    x2 = 350, y2 = 350;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

Demo

// vertical line: down -> up
    x1 = 150, y1 = 350,
    x2 = 150, y2 = 150;
drawnode(x1, y1);
drawnode(x2, y2);
drawline(x1, y1, x2, y2);

Demo

Rendered some lines using div tag. Please refer below code

<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform:   translateY(-20px) translateX(5px) rotate(27deg); position: absolute;/* top: -20px; */"></div>
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); position: absolute;top: -33px;left: -13px;"></div>

hope it helps.

fiddle link :

http://jsfiddle.net/NATnr/45/

Thanks,

Siva

You can create a tag like p, or div, set width whatever you wanted, add top border and append it to the div within you want to create a line.

You can use CSS3 2D Transforms http://jsfiddle.net/dmRhL/:

.line{
    width: 150px;
    transform: translate(50px,100px) rotate(30deg);
    -ms-transform: translate(50px,100px) rotate(30deg); /* IE 9 */
    -webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */
}

But looks like your problem is the old IE browsers that that will probably not help.

You can try using excanvas - a JS library that simulates the canvas element using IE's VML renderer.

Or some 2D drawing framework that will use canvas or SVG depending on browser support. You can find a full list at http://en.wikipedia.org/wiki/JavaScript_graphics_library

Other answers are very better than this... This uses PURE CSS, if you need.

<head>
<style>
#i1,#i2,#i3,#i4,#i5,#i6,#i7,#i8{border-right:2px solid black; height:2px;}
#i1{width:30px;}#i2{width:31px;}#i3{width:32px;}#i4{width:33px;}#i5{width:34px;}#i6{width:35px;}#i7{width:36px;}#i8{width:37px;}
</style>
</head>

<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4"></div>
<div id="i5"></div>
<div id="i6"></div>
<div id="i7"></div>
<div id="i8"></div>

And if you need to draw axis-parallel lines, you can put width or height as 1px and increase the other. fiddle here.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在Google图表中绘制视线(Drawing visual Lines in Google Charts)
    问题 我正在写Google图表。 它具有堆叠的列。 最重要的是,我想绘制2条线,指示最小和最大允许值。 我想到的唯一解决方案是修改ComboCharts的第一个示例。 我的结果看起来像这样: 这还不够。 该图是可变的,因此,如果仅显示1个夸脱,则该线将仅是一个点。 我的问题是: 有没有办法进一步画这条线,使它碰到图形的左右边界? 我可以在不假装是另一个数据点的情况下将标记线绘制到图形中吗? 如果需要,您可以在此处摆弄ComboChart。 回答1 您无法使用离散的(基于字符串的)x轴使线条边缘到边缘。 如果您切换到连续轴(数字,日期,日期时间,每日时间),则可以在实际数据之前添加一行,在其后包含目标行的另一行(其他数据系列为null): function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Quarter'); data.addColumn('number', 'Value 1'); data.addColumn('number', 'Value 2'); data.addColumn('number', 'Value 3'); data.addColumn('number', 'Goal 1'); data.addColumn(
  • 计算Google地图javascript上绘制的多边形的面积(calculate area of a drawn polygon on google map javascript)
    问题 嗨,我必须计算Google地图上绘制的多边形的面积。 jsfiddle http://jsfiddle.net/tvqzd/4/ 我用它计算 var area = google.maps.geometry.spherical.computeArea(newShape.getPath()); 但我希望在单击按钮时进行计算 多边形是可编辑的。 如果我更改/编辑区域怎么办? 我可以在areachange事件中获取该区域吗? 回答1 您需要在多边形路径上侦听set_at和insert_at事件,并在其中一个触发时重新计算面积。 文档中用户可编辑形状事件的描述 范例:http://jsfiddle.net/geocodezip/hk82v0zp/2/ 代码段: var drawingManager; var selectedShape; var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } }
  • 合并画布和背景(merging canvas and background)
    问题 我有一个带有 GIF 背景的画布。 我需要用户上传绘图和 BG,以便另一个用户可以看到绘图与 BG 相关的位置。 canvas.toDataURL(); 代码仅显示带有用户绘图的画布区域,而不显示 BG。 如何展平或“合并图层”,以便我可以上传到数据库。 var mousePressed = false; var lastX, lastY; var ctx; function InitThis() { ctx = document.getElementById('myCanvas').getContext("2d"); $('#myCanvas').mousedown(function(e) { mousePressed = true; Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false); }); $('#myCanvas').mousemove(function(e) { if (mousePressed) { Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true); } }); $('#myCanvas').mouseup(function(e) { mousePressed
  • 在html中播放wav音频文件的移动波形(Play a moving waveform for wav audio file in html)
    问题 如何为 HTML 中的音频文件/标签创建移动波形? 单击播放按钮时,必须播放音频 HTML 元素并为其生成相应的移动波形....如何实现? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title id='title'>HTML Page setup Tutorial</title> <script src='riffwave.js'></script> <script type="text/javascript"> function myFunction() { var data = []; // just an array for (var i=0; i<10000; i++) data[i] = /*Math.round(255 * Math.random())*/i; // fill data with random samples var wave = new RIFFWAVE(data); // create the wave file var audio = new Audio(wave.dataURI); // create the HTML5 audio element audio.play(); } </script> <
  • 绘制半规/车速表(需要JavaScript Canvas或Java Swing示例)(Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 7年前关闭。 改善这个问题 有没有人有一个javascript canvas或java swing示例? 像这样的东西:http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif 我应该如何画出“分隔线”? 回答1 如果您想要一个简单的基于JavaScript画布的量规,则可以使用我自己创建的一个lib。 它易于使用,并具有wyswig配置器,可轻松进行量规定制。 我已将其推送到GitHub上,网址为http://bernii.github.com/gauge.js。 您可以得到的一些预览: 回答2 我建议查看Raphael Javascript图形库。 它可在所有浏览器(包括IE!的旧版本)中使用,并使用矢量图形,因此它生成的图形可伸缩且可旋转,而不会降低图像质量,甚至还包括动画功能。 这是一个使用拉斐尔(Raphael)制作一些非常美观的仪表的人的链接:http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css 但是
  • 玩转vscode支持PlantUML绘制预览流程图
    软件设计中,有好几种图需要画,比如流程图、类图、组件图等,我知道大部分人画流程图一般都会用微软的viso绘制,我之前也是这个习惯。 viso画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观,今天我给大家介绍一款程序员画图神器PlantUML,一款你用了就爱上的画图软件! VsCode以插件的形式支持了这款画图神器,还不知道VsCode? VsCode 强大地自定义功能,已经成为程序员最爱编辑器。 Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和Linux之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax high lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。引用360百科 主角出场 PlantUML PlantUML是一个开源项目,支持快速绘制: 时序图 用例图 类图 活动图 (旧版语法在此处) 组件图 状态图 对象图 部署图 定时图
  • 修复谷歌地图折线的编码字符串(Fixing encoded string for Google Maps polyline)
    问题 我有一个编码字符串,我想用它在谷歌地图中画一条线,但由于反斜杠等特殊字符,Javascript 无法读取该字符串。 不幸的是,我对 Javascript 没有太多经验,也不知道如何转义这些字符。 编码字符串: qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO 到目前为止我尝试过的: <!DOCTYPE html> <html> <head> <title>Filtered Data</title> <style type="text/css"> html, body {
  • 如何使用JavaScript在画布上手绘?(How do I hand draw on canvas with JavaScript?)
    问题 问题 如何像使用铅笔一样在画布元素上自由绘画(使用鼠标/手指)? 关于这个问题 要在画布上实现自由手绘有很多问题: 用HTML5 Canvas用鼠标绘制 KineticJS-用鼠标免费绘制使用fabric.js在画布上免费绘制用JS素描油漆画布无法正常工作鼠标在画布上的位置在元素上实现平滑的草图绘制 因此,我认为提出一个参考问题是一个好主意,其中每个答案都是社区Wiki,并包含对一个JavaScript库/纯JavaScript如何在画布上绘画的解释。 答案的结构 答案应为社区Wiki,并使用以下模板: ## [Name of library](Link to project page) ### Simple example A basic, complete example. That means it has to contain HTML and JavaScript. You can start with this: <!DOCTYPE html> <html> <head> <title>Simple example</title> <script type='text/javascript' src='http://cdnjs.com/[your library]'></script> <style type='text/css'> #sheet { border
  • 在Google地图上使用鼠标绘制多边形(Draw polygon using mouse on google maps)
    问题 我需要使用鼠标绘制多边形并在Google地图上标记一个特定区域。 目的是在Google地图上标记一个区域,然后显示该区域的酒店和景点。 用户在创建酒店时会在Google地图上标记酒店,以便数据库具有其经度和纬度。 如何绘制多边形并将其填充为背景颜色以标记Google Maps中的区域? 我已经阅读了API手册“如何绘制多边形?” 基本上,您需要标记多个点,然后将它们组合成一个多边形。 但是我将需要使用鼠标拖动来执行此操作,就像绘制形状一样。 请帮我解决这个问题。 回答1 您可以在应用程序中使用Google MyMaps多边形编辑工具,也许这样适合您吗? 参见http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html 但是,如果您想自己实现,则基本上是这样的: 添加点击侦听器以进行映射。 重复:将用户单击的点存储在数组中,并在此点添加标记。 如果它是第一个标记,则将点击侦听器添加到它 当用户单击第一个标记时,使用点数组进行解析以构建多边形 我没有任何代码可以显示给您,但是我已经在以前的公司中自己实现了,所以可以做到这一点:) 回答2 以下是一些代码(适用于Google Maps JavaScript API版本3),可以实现所需的功能。 它支持: 单击以添加顶点。
  • 使用HTML5和iPad捕获签名(Capture Signature using HTML5 and iPad)
    问题 有人知道该怎么做吗? 您会使用canvas对象,svg,jQuery等吗? 回答1 这是另一个具有可变宽度(基于绘制速度)曲线的基于画布的版本:位于http://szimek.github.io/signature_pad的演示和位于https://github.com/szimek/signature_pad的代码。 回答2 具有某些JavaScript的canvas元素会很好用。 实际上,Signature Pad(一个jQuery插件)已经实现了此功能。 回答3 这是我刚刚使用SVG进行的快速修改。 在我的iPhone上对我来说效果很好。 在使用正常鼠标事件的桌面浏览器中也可以使用。 回答4 最好的两种浏览器技术可能是Canvas,并以Flash作为备份。 我们在IE上尝试使用VML作为Canvas的备份,但是它比Flash慢得多。 SVG的速度要慢于其他所有速度。 使用jSignature(http://willowsystems.github.com/jSignature/),我们使用Canvas作为主要对象,并回退到IE8及以下版本的基于Flash的Canvas仿真器(FlashCanvas)。 同上说对我们非常有效。 回答5 已经列出的选项非常好,但是这里有一些我研究过并遇到过的关于此主题的信息。 1)http://perfectionkills.com
  • tools-百度地图画出区域并获取区域坐标范围
    说明 仅仅有一个html 代码,把这个代码复制到html文件中,然后用浏览器打开就可以看到效果了。 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;} #allmap {margin-right: 300px;height: 100%;overflow: hidden;} #result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微软雅黑
  • HTML表格中的垂直(旋转)文本(Vertical (rotated) text in HTML table)
    问题 是否有(便携式)方式将HTML表格单元格中的文本旋转90°? (我的表标题很多列,文本很多,所以我想垂直书写以节省空间。) 回答1 .box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ } <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor
  • 在html页面上画线(Drawing lines on html page)
    问题 我们如何在html页面中画一条线。 我尝试使用画布,但发现它不起作用。 也许浏览器不支持它。 还有其他更简单的方法吗? 回答1 编辑:也许为时已晚,但这是我的新实现。 希望它更具可读性。 function createLineElement(x, y, length, angle) { var line = document.createElement("div"); var styles = 'border: 1px solid black; ' + 'width: ' + length + 'px; ' + 'height: 0px; ' + '-moz-transform: rotate(' + angle + 'rad); ' + '-webkit-transform: rotate(' + angle + 'rad); ' + '-o-transform: rotate(' + angle + 'rad); ' + '-ms-transform: rotate(' + angle + 'rad); ' + 'position: absolute; ' + 'top: ' + y + 'px; ' + 'left: ' + x + 'px; '; line.setAttribute('style', styles); return line; } function
  • 如何为网页上的文字绘制动画?(How can I animate the drawing of text on a web page?)
    问题 我想要一个包含一个中心词的网页。 我希望用动画来绘制该单词,以便页面以与我们相同的方式“写”出该单词,即,它从一个点开始并随时间绘制线条和曲线,从而最终结果是一个字形。 我不在乎是否使用<canvas>或DOM完成,也不在乎是否通过JavaScript或CSS完成。 缺少jQuery会很好,但不是必需的。 我怎样才能做到这一点? 我已经进行了详尽的搜索,没有运气。 回答1 我希望用动画来绘制该单词,以便页面以与我们将要使用的相同方式“写”出该单词 画布版本 这将绘制单个字符,就像用手写的字符一样。 它使用长破折号模式,其中每个字符的开/关顺序会随着时间交换。 它还具有速度参数。 动画示例(请参见下面的演示) 为了增加真实感和自然感,我添加了随机字母间距,y增量偏移,透明度,非常细微的旋转,最后使用了已经“手写”的字体。 这些可以包装为动态参数,以提供广泛的“书写样式”。 为了更真实的外观,将需要路径数据,默认情况下不需要。 但这是一段简短高效的代码,近似于手写行为,并且易于实现。 这个怎么运作 通过定义破折号模式,我们可以创建行进蚂蚁,虚线等。 通过为“ off”点定义一个非常长的点并逐渐增加“ on”点来利用这一点,这会给人一种在绘制点的动画时画线的动画效果,同时赋予点长以动画效果。 由于关闭点太长,因此无法看到重复图案(其长度将随所用字体的大小和特性而变化)。
  • Google Maps API v3 in PhoneGap: markers not drawing properly after move
    I've been working on a Google Maps API 3 application on Android using PhoneGap. It should track the users location and mark the location with a marker and a circle around it. I had been developing this on Android 2.3 and it was working fine. I then upgraded to a phone with Android 4.x and it was still working well, I thought. Last week I began noticing it doing some strange things when I move the markers. It would seem to create a duplicate marker instead of just moving it. Same with the circle. Sometimes if I change zoom then the duplicates seem to go away. But also, it occasionally draws
  • [数据可视化]绘制持仓榜单的“棒棒糖图”
    1. 需求做股票分析的朋友经常会见到类似这种的期货公司持仓榜单图:这种图就是棒棒糖图。也就是我们今天文章的目标:绘制出期货持仓榜单的棒棒糖图图中线的两端是圆点或者菱形,旁边都有标注持仓证券商和相对应的持多仓数或持空仓数,且左右线颜色不同。画图思路大体就是:先画水平线图,再用 scatter 散点图画线左右两端的点,然后标注两端名称,以及标题和注解。Python 中比较常用的两种图表库是 matplotlib 和 plotly。上图就是以 matplotlib 绘制。而 Plotly 交互性更好。更进一步,如果想让用户可以点击选择交易日期,查看该日期对应的榜单图,这就可以通过一个响应式 web 应用程序来实现。Dash 是一个基于 python 的交互式可视化 web 应用框架,matplotlib 和 Plotly 都可与 Dash 框架结合使用。Matplotlib 大家比较熟悉。在开始之前,我们先简单介绍下 plotly 和 Dash。2. Plotlyplotly 库(plotly.py)是一个交互式的开源绘图库,支持40多种独特的图表类型,涵盖各种统计,财务,地理,科学和三维用例,是适用于Python,R 和 JavaScript 的交互式图表库。plotly.py 建立在 Plotly JavaScript 库(plotly.js)之上,使Python用户可以创建基于
  • javascript实现画板界面
    用javascript编写画板 实现效果 代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box { width: 600px; height: 500px; margin: 100px auto; background-color: orange; } #box nav { width: 100%; height: 100px; } #box nav div { height: 50px; line-height: 50px; } /*类选择器*/ .changeColor { padding-left: 15px; } .changeColor input { width: 30px; height: 30px; margin: 10px 15px; } /*clear第一个(清空画布) css3属性first-of-type:指定父元素的首个 input 元素的背景色:*/ .clean input:first-of-type { width: 100px; height: 30px; background-color: white; margin-left: 15px; } /*最后一个,橡皮擦*/ .clean input:last-of-type {
  • 如何保存地图绘图状态(多边形,折线,标记)(How to save map drawing state (Polygon, Polyline, Markers))
    问题 我想在Google Maps上启用绘图(见本例),当用户完成绘图时,他将单击“保存”按钮以将其绘图保存到Database或KML文件中,.......我不知道如何保存该部分? 谁能帮我 回答1 在这里,http://jsfiddle.net/X66L4/1/尝试绘制一些圆,单击“保存”,然后通过切换到手形光标并再次保存以查看更改来编辑圆。 我展示了一个保存圆数据的示例,主要思想是为每种图形类型(线,多边形,标记,圆)保留一个全局数组,并在图形管理器上使用侦听器来检测所绘制的每种类型(完整) 。 var circles = []; google.maps.event.addDomListener(drawingManager, 'circlecomplete', function(circle) { circles.push(circle); }); 将整个参考保存到绘制的对象的原因是继续跟踪更改。 因此,每种类型的绘图都需要一个数组和一个侦听器。 然后,当您要保存数据时(您可能希望在每次编辑时都这样做),请遍历数组并提取最少的信息以重建它(中心,半径,路径,纬度等)。 <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #map_canvas { margin: 0; padding: 0
  • PhoneGap中的Google Maps API v3:移动后标记无法正确绘制(Google Maps API v3 in PhoneGap: markers not drawing properly after move)
    问题 我一直在使用PhoneGap在Android上开发Google Maps API 3应用程序。 它应该跟踪用户的位置,并用标记和周围的圆圈标记该位置。 我一直在Android 2.3上进行开发,并且运行良好。 然后,我认为我升级到了装有Android 4.x的手机,但它仍然运行良好。 上周,当我移动标记时,我开始注意到它在做一些奇怪的事情。 似乎会创建一个重复的标记,而不仅仅是移动它。 与圈子相同。 有时,如果我更改缩放比例,则重复项似乎消失了。 但是,它偶尔也会画出一些奇怪的切线。 参见下面的图片。 这是我在手机上收到Android版本4.1.1更新后不久。 不确定是否相关,我找不到有关问题的任何信息。 我将地图和phonegap代码减少到少于100行,并且它仍然在执行。 我很确定它与phonegap无关,但是可以肯定的是我还是将其升级到2.2,但这没有帮助。 谁能告诉我在移动标记和圆圈时我做错了什么吗? 请注意,我在下面删除了我的Google Maps API密钥。 谢谢,埃里克 <!DOCTYPE HTML> <html> <head> <title>Marker Test</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text
  • 在 AngularJS 服务中处理数据绑定(Handling data binding in AngularJS Services)
    问题 我试图弄清楚当我的数据存储在服务中时如何正确处理绑定。 如果它将服务放入 $scope 中,然后让模板直接绑定到它,我可以让事情正常工作,但这似乎是一个非常糟糕的主意。 我基本上希望拥有它,以便我的视图/控制器能够轻松地更改服务中的状态并将其反映到任何地方。 感觉我应该能够做类似以下的事情,但它不起作用(http://jsfiddle.net/aidankane/AtRVD/1/)。 HTML <div ng-controller="MyCtl"> <select ng-model="drawing" ng-options="d.file for d in drawings"></select> </div> <div ng-controller="MyOtherCtl"> {{ drawing }} </div> JS var myApp = angular.module('myApp', []); myApp.factory('myService', function(){ var me = { drawings: [{'file':'a'}, {'file':'b'}] }; // selected drawing me.drawing = me.drawings[0]; return me; }); function MyCtl($scope, myService){