用javascript 反馈服务器svg图片两点坐标?
xml 代码
-
- <svg>
- <script type="text/javascript">
- <!---->
-
- function changeText(evt)
- {
- var XPos = evt.getClientX();
- var YPos = evt.getClientY();
-
- targetXtext=svgDocument.getElementById("XPos");
- targetYtext=svgDocument.getElementById("YPos");
-
- var newXPosText = svgDocument.createTextNode("X... Position : " + XPos);
- var newYPosText = svgDocument.createTextNode("Y... Position : " + YPos);
-
- targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());
- targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());
- }
-
- function changeTextNotOver(evt)
- {
- targetXtext=svgDocument.getElementById("XPos");
- targetYtext=svgDocument.getElementById("YPos");
-
- var newXPosText = svgDocument.createTextNode("X.. Position : Not over Rectangle");
- var newYPosText = svgDocument.createTextNode("Y.. Position : Not over Rectangle");
-
- targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());
- targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());
-
- }
-
- function recordClick(evt)
- {
- targetClickText=svgDocument.getElementById("ClickPosd");
-
- var XPosd = evt.getClientX();
- var YPosd = evt.getClientY();
-
- var newClickText = svgDocument.createTextNode("Last Click made at X=" + XPosd + " Y=" + YPosd);
-
- targetClickText.replaceChild(newClickText, targetClickText.getFirstChild());
-
- }
-
- function recordClickup(evt)
- {
- targetClickText=svgDocument.getElementById("ClickPosu");
-
- var XPosu = evt.getClientX();
- var YPosu = evt.getClientY();
-
- var newClickText = svgDocument.createTextNode("Last Click made at: /n X=" + XPosu + " Y=" + YPosu);
-
- targetClickText.replaceChild(newClickText, targetClickText.getFirstChild());
-
- }
-
-
-
- // ]]>
- script>
- <text id="XPos" x="50" y="30">X. Position :text>
- <text id="YPos" x="50" y="50">Y. Position :text>
- <text id="ClickPosu" x="50" y="70">Last Click made at : text>
- <text id="ClickPosd" x="50" y="90">Last Click made at : text>
- <rect x="50" y="100" width="200" height="200" style="fill:blue" onmousemove="changeText(evt)" onmouseout="changeTextNotOver(evt)" onmousedown="recordClick(evt)" onmouseup="recordClickup(evt)"/>
-
- >
-
-
以下是svg原码
aa.svg
我想比较鼠标按下和抬起坐标的差,判断鼠标是否移动了。然后把两个坐标值发送给服务器,?
分享到:
相关推荐
在IT行业中,SVG(Scalable Vector Graphics)和jQuery是两个非常重要的库,它们在创建交互式和动态网页内容方面发挥着关键作用。本篇文章将深入探讨如何利用SVG.js和jQuery来实现HTML网页中的连线功能。 SVG是一种...
在这个“HTML5 SVG仿PS拖动裁剪图片特效代码”中,开发者利用这两种技术模仿了Photoshop(PS)中的图片裁剪功能,为用户提供了一种直观且灵活的图片编辑体验。 首先,HTML5是第五代超文本标记语言,它增强了网页的...
JavaScript 和 VML(Vector Markup Language)技术在网页中创建统计图表是一种早期的解决方案,尤其在SVG(Scalable Vector Graphics)在所有现代浏览器得到广泛支持之前。本教程将深入探讨如何利用这两种技术来构建...
在C#编程环境中,可以通过使用ASP.NET的服务器控件或者JavaScript库如jQuery SVG来实现。 1. **矢量图形**:与像素图(如JPEG、PNG)不同,矢量图基于数学公式和路径描述图形,因此它们可以无限放大而不失真。在ASP...
在这个实例中,我们看到它使用JavaScript(js)、Java(尽管这里可能指的是JavaScript的jQuery库,因为Java和JavaScript是两种不同的语言)、jQuery和Raphaël.js库来创建。Raphaël.js是一个JavaScript库,专门用于...
在构建可视化地图界面时,Java和JavaScript是两种常用的编程语言,它们可以有效地创建交互式的Web应用程序,特别是对于呈现地理信息而言。在这个项目中,我们利用SVG(Scalable Vector Graphics)作为图形表示方式,...
- JavaScript是一种广泛使用的脚本语言,用于客户端和服务器端的Web开发。 - 它支持DOM操作、事件处理等,是实现动态Web页面的关键技术之一。 2. **DOM(Document Object Model)**: - DOM是一种标准,用于表示...
考虑到项目名为“fengche”,很可能是使用了图片或SVG元素来表示风车,因为这两种方式都可以方便地进行旋转操作。如果是SVG,还可以利用其矢量图形的特点,确保风车在不同尺寸屏幕下都能保持清晰。 至于压缩包内的...
本论文研究的目的是使用 ...比如直接使用 Canvas 去画贝塞尔曲线比较繁琐,使用 ZRender.js 时只需提供画布的两个对角线为起止点坐标,同时配置绘图画线颜色 stroke 和线宽度 lineWidth,就可以创建一条贝塞尔曲线。
在这个示例中,VML将被用来绘制曲线图的各个部分,如线条、坐标轴以及可能的点标记。 现在,我们分析两个关键文件: 1. **vChart.html**:这是HTML文件,它会设置页面结构并引入vChart.js脚本。HTML将包含一个容器...
8. **添加标记点**:虽然实例中没有详细描述,但通常在地图上添加标记点可以通过在解析的XML数据中查找特定的地理要素(如点特征),然后使用JavaScript动态创建SVG或HTML元素来实现标记的可视化。 这个实例提供了...
- **SVG或Canvas**:可能用这两种HTML5元素来绘制和渲染地图,SVG适用于矢量图形,Canvas适用于像素级操作。 **4. 加亮效果实现** 省份加亮效果可能通过以下方式实现: - **CSS3**:通过改变选中省份的填充色或边框...
3. **src** - 这个目录可能包含了手势密码功能的源代码,包括JavaScript文件,可能还有SVG路径处理、图形绘制和用户输入验证的相关逻辑。源代码通常会被组织成模块化,以便于理解和维护。 4. **dist** - 分发目录...
为了保证旋转后的图片仍然居中显示,开发者可能需要进行坐标转换,确保图片的中心点保持不变。 调整图像大小是另一个关键特性。这可能涉及到CSS3的transform属性,尤其是scale()函数,可以实现图像的无损缩放。同时...
此外,为了提高图表的可读性和美观性,开发者可能还使用了颜色管理、图例、时间轴、坐标轴标签等设计元素,并可能借助了第三方库,如D3.js、Chart.js或者ECharts等,它们提供了一系列的图表组件和便利的API,简化了...
它支持SVG和Canvas两种渲染方式,能够在各种浏览器上良好运行。Echarts的特点是交互性强、性能优异,适合大规模数据的实时渲染。 2. **地图插件**:Echarts地图功能是通过集成地图插件实现的,这些插件通常包含了...
百度地图API提供了一个专门的计算工具,可以计算两点之间的直线距离或实际道路距离,这对物流、旅游等领域非常有用。 在名为“MapWust”的压缩包文件中,可能包含了一个示例项目或者源代码,它演示了如何结合以上...
"Java + JS" 指的是两种编程语言的结合,Java通常用于服务器端处理,而JavaScript则常用于客户端交互。在这个项目中,Java可能负责后端数据处理和地图数据的生成,而JavaScript则可能负责前端的地图展示和用户交互,...
6. **图形与标记**:API提供了`Graphic`对象,用于在地图上添加自定义图形,如点、线、面或复杂的SVG图形。开发者可以利用这一功能创建标记、高亮区域等视觉元素,增强地图的表达力。 7. **事件处理**:API中的事件...