开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在鼠标点击位置绘制svg多边形

在鼠标点击位置绘制SVG多边形，可以通过以下步骤实现：

首先，需要在HTML文档中创建一个SVG元素，用于容纳多边形的绘制。可以使用<svg>标签，并设置宽度和高度。
在JavaScript中，监听鼠标点击事件。可以使用addEventListener方法，绑定click事件到SVG元素上。
在点击事件的处理函数中，获取鼠标点击位置的坐标。可以使用event.clientX和event.clientY属性获取相对于浏览器窗口的坐标。
创建一个多边形元素，并设置其属性。可以使用<polygon>标签，并设置points属性为多边形的顶点坐标。
将多边形元素添加到SVG元素中，以便在页面上显示。可以使用appendChild方法将多边形元素添加到SVG元素中。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>绘制SVG多边形</title>
</head>
<body>
  <svg id="svg" width="500" height="500"></svg>

  <script>
    // 获取SVG元素
    var svg = document.getElementById('svg');

    // 监听鼠标点击事件
    svg.addEventListener('click', function(event) {
      // 获取鼠标点击位置的坐标
      var x = event.clientX;
      var y = event.clientY;

      // 创建多边形元素
      var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');

      // 设置多边形的顶点坐标
      var points = [
        (x - 10) + ',' + (y - 10),
        (x + 10) + ',' + (y - 10),
        x + ',' + (y + 10)
      ];
      polygon.setAttribute('points', points.join(' '));

      // 将多边形元素添加到SVG元素中
      svg.appendChild(polygon);
    });
  </script>
</body>
</html>

这段代码会在鼠标点击位置绘制一个以点击位置为中心的等边三角形。你可以根据需要修改多边形的顶点坐标和属性，以绘制不同形状的多边形。

关于SVG的更多信息和用法，你可以参考腾讯云的SVG介绍页面：SVG介绍。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

echarts实现航班选座案例分析

示例的完整代码在做选座的功能，我们使用div布局加背景图的技术手段也能简单实现，但不支持缩放，在位置比较多，想要看详细的情况下，就需要用到svg，这个可以扩大缩小后不会失真的矢量图形。...这里可以看到是svg的具体内容。注册自定义地图 echarts是可以搭配地图来实现自定义的位置坐标布局渲染的。但不仅仅局限于百度，高德地图。他还支持将一个符合地图数据的svg注册为一个地图。...地理坐标系组件用于地图的绘制，支持地理坐标系上绘制散点图，线集。有关geo组件的所有的配置项都可以在此处查询到详细的解析。此案例使用的就是该组件，那么下面来看下示例是如何配置的。...layoutCenter, layoutSize 用于调整echarts的实例在dom容器中的初始位置。 tooltip 是否开启tooltip效果，开启后，鼠标放到座位上会有文本提示当前座位。...itemStyle 座位的默认样式，配置颜色，字体 emphasis 高亮状态下的多边形和标签样式。 select 选中状态下的多边形和标签样式。 regions 在地图中对特定的区域配置样式。

2.2K1 0

Shader 编程：只用一个函数就能生成三角形、矩形等所有的正多边形

下载安装 VSCode https://code.visualstudio.com/download；安装 ShaderToy 插件；新建以 .frag 为后缀名的文件，复制粘贴本文的代码；当前代码，点击鼠标右键...---- 绘制多边形 绘制多边形的思路跟画圆的思路一样，圆形可以看做一个有正无穷边的多边形。有了这个思路你就可以明白，我们需要为每条边划分对应的弧度，弧度相同它就是正多边形。...3.1415926535897932384626433832795 float polygonSDF(vec2 uv, float radius, float sides){ // 原点设置到中心位置...这个直接绘制成正多边形的效果 SDF 有向距离场上节其实牵扯到 SDF 算法，因为后面涉及高级特效的时候会经常用到，这里先提前对它做个简单的介绍，先在心里有个概念。...具体步骤如下：生成轮廓：将字形（或图形）转换为轮廓线，通常使用矢量图形描述，如 TrueType 字体或 SVG 图形。

6382 0

一个有趣的例子带你入门canvas

那么下面咱们一起来看看这个问题，这个问题问了两个小问题： 1.如何在 canvas 上绘制多边形2.鼠标怎么选中绘制的某一个图形？那么咱们就来分为两个问题解答。...现在绘制多边形就没有什么问题了。 canvas 上找出指定的图形首先，完成描述一下这个问题：按下鼠标，如何判断出选中了某一个图形？...比如下图：鼠标点击了这个不规则多边形的内部，怎么判断？...方案如果想要快速选中某一个图形，我们能不能对我们的每一个图形有一个对应的 hash，而在鼠标点击的时候，又能够取到这个 hash。...当鼠标点击的时候，在隐藏画布相同的位置，取一个像素点。而这个像素点的rgb值就是我们要找的 hash。至此，两个问题已经解答了。

9001 0

一文 get 入门 canvas 的最佳路径

咱们一起来看看这个问题，这个问题问了两个小问题： 1.如何在 canvas 上绘制多边形? 2.鼠标怎么选中绘制的某一个图形？那么咱们就来分为两个问题解答。...现在绘制多边形就没有什么问题了。 canvas 上找出指定的图形首先，完成描述一下这个问题：按下鼠标，如何判断出选中了某一个图形？比如下图： ?...鼠标点击了这个不规则多边形的内部，怎么判断？...方案如果想要快速选中某一个图形，我们能不能对我们的每一个图形有一个对应的 hash，而在鼠标点击的时候，又能够取到这个 hash。...当鼠标点击的时候，在隐藏画布相同的位置，取一个像素点。而这个像素点的rgb值就是我们要找的 hash。至此，两个问题已经解答了。

9176 1

hover 背后的数学和图形学

SVG SVG 除了矩形之外，还有、等代表某种特定图形的元素，以及、这类绘制任意图形的元素。...Canvas 2D Canvas 2D（下文简称Canvas）是比 SVG 更底层的图形技术，只有 rect 这一种特定图形，其他的图形都是通过使用直线、弧线、贝塞尔曲线等路径 API 绘制出来。...Canvas 绘制的图形都是在一个元素内，并不能向 DOM 或 SVG 一样使用 CSS 伪类或js事件实现某个图形的hover效果。...WebGL 中实现某个图形的 hover 以及click、mouseover、mouseout等鼠标事件的根本就是上文提到的判断一个点是否位于一个不规则多边形内。...所以WebGL中的任何图形本质上都是多边形，既然是多边形就可以按照上文的方案解决点与多边形的相对位置判断问题。如何判断两条线段有交点？

1.4K1 0

可视化场景内任意绘制多边形并测量面积

面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离。如何在3D场景中测量面积？...下面我就在ThingJS平台实现鼠标任意点绘制多边形面积，计算绘制总长度和占地面积，支持在数字孪生可视化场景内任意绘制多边形并测量面积。...先来看一下实现效果：微信截图_20210813100919.png 实现思路 1、首先是添加注册事件，单击鼠标左键添加点位，鼠标移动持续绘制测量线段，双击或单击鼠标右键结束。...通过节点和线段来创建参数组，统一所有鼠标点击后的坐标点集合，生成不规则图形的测量面积。...this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合 this.ePosition = null; // 存储触发事件后鼠标的位置

6913 0

百度地图电子围栏功能的实现

本篇内容实现的过程中将会解决如下几个问题：（1）实现百度地图鼠标绘制多边形功能；（2）实现根据给定的坐标绘制多边形的功能；（3）判断某个坐标点是否在绘制的区域内；（4）绘制的坐标点如何在数据库中保存...；下面按照实际需求一步一步来讲解和实现： 1 实现多边形绘制功能 1.1 从百度地图官方库下载鼠标绘制多边形功能demo 　　如何绘制一个多边形，我在看网上博客的时候，大部分人都是直接贴一堆代码上来...这里的添加鼠标绘制工具监听时间，用于获取绘制结果，实际上就是在这里把多边形的顶点放入overlays这个对象中，那么我们如何获取这些点的坐标呢，还是从官方文档里找答案，看下面： 1>在刚才的JavaScript...console.log(overlays[0].getPath()); } overlays[0]表示第一个多边形，然后我们绘制一个多边形，点击一下，看下控制台打印的结果： ?...，这里我用的多边形是上一步绘制的多边形，所以测试时，先点击 “绘制多边形” ，然后再输入坐标，再点击 “判断是否在多边形内”。

3.4K4 0

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。...今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。..."20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/> polyline - 折线 points 属性定义多边形每个点的...none" stroke = "black" stroke-width = "3"/> rect - 矩形 rect 元素的 width 和 height 属性可定义矩形的高度和宽度 x 属性定义矩形的左侧位置...（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） CSS 的 fill-opacity 属性定义填充颜色透明度

4K17 0

SVG 入门指南(初学者入门必备)

在元素内包含 SVG 在元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。...多边形 ? 咱们可以使用元素绘制多边形，使用 points 属性指定一系列的 x/y 坐标对，并用逗号或者空格分隔坐标个数必须是偶数。...从上面很容易看出多边形都很容易填充，因为多边形的各边都没有交叉，很容易区分出多边形的内部区域和外部区域。但是，当多边形彼此交叉的时候，要区分哪些区域是图形内部并不容易。...如下如融合所示，中间的区域是算内部还是外部呢？...鼠标悬停或者轻触组合内的图形时，会显示元素内容的提示框。

3.3K2 1

SVG 入门指南(看完,对SVG结构不在陌生)

在元素内包含 SVG 在元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。...来几个例子看看： 多边形 咱们可以使用元素绘制多边形，使用 points 属性指定一系列的 x/y 坐标对，并用逗号或者空格分隔坐标个数必须是偶数。...> 从上面很容易看出多边形都很容易填充，因为多边形的各边都没有交叉，很容易区分出多边形的内部区域和外部区域。...但是，当多边形彼此交叉的时候，要区分哪些区域是图形内部并不容易。如下如融合所示，中间的区域是算内部还是外部呢？...鼠标悬停或者轻触组合内的图形时，会显示元素内容的提示框。

2.7K2 0

图形编辑器基于Paper.js教程08：鼠标画封闭的自由多边形，靠近起点自动关闭

在这篇技术博客中，我们将深入探讨如何使用 Paper.js 实现一个基本的图形绘制应用，允许用户在画布上绘制封闭的多边形。...paper.setup('myCanvas'); 工具和事件处理接下来，我们创建一个 new paper.Tool() 实例，这个工具将用来处理用户的鼠标事件，如点击、移动和释放，这些都是绘制图形过程中的关键互动...添加顶点和闭合路径如果路径已经存在，并且用户点击的位置接近第一个顶点，则路径将被闭合，完成多边形的绘制。...实时更新和结束绘图当用户移动鼠标时，onMouseMove 事件更新当前正在绘制的路径的最后一个点，这样用户可以看到从最后一个顶点到鼠标位置的实时线条。...if (path) { path.lastSegment.point = event.point; } 在鼠标释放时，onMouseUp 事件也会更新路径的最后一个点，确保顶点的位置与用户最后点击的位置一致

1811 0

可视化初探上

图片在上面这段 SVG 代码中，g 表示分组，rect 表示绘制一个矩形元素。除了 rect 外，SVG 还提供了丰富的图形元素，可以绘制矩形、圆弧、椭圆、多边形和贝塞尔曲线等等。...缺点因为 HTML 和 SVG 一个元素对应一个基本图形，所以我们可以很方便地操作它们，比如在柱状图的某个柱子上注册点击事件。...如果我们要绘制的图形数量非常多，比如有多达数万个几何图形需要绘制，而且它们的位置和方向都在不停地变化，那我们即使用 Canvas2D 绘制了，性能还是会达到瓶颈。...假设我们要在画布的中心位置绘制一个 100 * 100 的红色正方形。...如果我们要绘制的图形不是圆、矩形这样的规则图形，而是一个复杂得多的多边形，我们又该怎样确定鼠标在哪个图形元素的内部呢？这对于 Canvas 来说，就是一个比较复杂的问题了。

1.7K6 0

HTML5(七)——SVG基础入门

" y="50" //可选左上角位置，svg的左上角默认(0,0) rx="20" ry="50" //可选设置圆角 stroke-width="3" stroke="red" fill="pink..."40" // 圆的半径 stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色上述(cx,xy)定义圆心的位置，是可选参数，...3.6、多边形 - polygon polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。...//多边形的第一点 100,100, //多边形的第二点 0,100 //多边形的第三点 " stroke="purple" stroke-width="1"...3.7、路径 - path path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

1.8K3 0

HTML5(七)——SVG基础入门

" y="50" //可选左上角位置，svg的左上角默认(0,0) rx="20" ry="50" //可选设置圆角 stroke-width="3" stroke="red" fill="pink...="40" // 圆的半径 stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色上述(cx,xy)定义圆心的位置，是可选参数...3.6、多边形 - polygon polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。...//多边形的第一点 100,100, //多边形的第二点 0,100 //多边形的第三点 " stroke="purple" stroke-width="1"...3.7、路径 - path path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。点个关注，下篇更精彩！

2.1K1 0

D3.js-基础知识

数据可视化已变得越来越被重视，市面上也出现了越来越多的图标库，如Highcharts。图标库很容易可以上手，然而在当前注重用户交互的时代，其不易交互性突显的越来越明显。...三、SVG SVG，指可缩放矢量图形(Scalable Vector Graphics)，是用于描述二维矢量图形的一种图形格式。D3在SVG中绘制图形！！！...多边形和折线只有一个points参数，表示一系列的点坐标。不同之处是多边形会将终点和起点连接起来。...6、文字在SVG中可以使用标签绘制文字。...参数说明 x 文字位置的x坐标 y 文字位置的y坐标 dx 相对于当前位置在x方向上平移的距离(正则往右，负则往左) dy 相对于当前位置在y方向上平移的距离(正则往下，负则往上) textLength

2.1K5 1

svg.js教程及使用手册详解（二）

——Polygon polyline画出的是折线，是不闭合的多边形，Polygon则相对的画出的是闭合的多边形。...具体如下： M = moveto(M X,Y) ：将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的...X坐标位置 V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto...600 300 700 200 C 800 100 900 100 900 100').font({ size: 42.5, family: 'Verdana' }) 以上代码在执行时，将沿着给定的路径绘制文本...画布上将会出现两个rect，原始的rect和use的实例，任何在原始rect上所做的修改都将会在use的实例上显现。

6.4K5 1

解锁前端难题：亲手实现一个图片标注工具

在移动视口时，我们需要更新图片的位置，并重新绘制图像以反映新的视口位置。...这需要跟踪当前被拖拽的标注，并在鼠标移动时更新其位置。...首先，我们需要在鼠标按下时判断是否点击了某个编辑点。在这里，我们使用 poInEditor 函数来判断鼠标点击的位置是否接近某个编辑点。...通过这个实例，我们可以看到，实现一个前端图片标注工具需要综合运用多种前端技术和知识，包括但不限于： Canvas API 的使用，如绘制图片、绘制形状、图形变换等。...鼠标事件的处理，如点击、拖拽、滚轮缩放等。几何计算，如点是否在矩形内、旋转角度的计算等。希望这个实例能够为你提供一些启发和帮助，让你在实现自己的图片标注工具时有一个参考和借鉴。

6951 0

Canvas 绘图技术：如何实现签名板签名功能以及导出图片

Canvas 是一个矩形区域，我们可以在这个区域内使用 JavaScript 绘制各种图形，如线条、矩形、圆形、多边形等。...二、Canvas 绘制签名板步骤在实现将签名版上的签名并导出为图片的功能之前，我们先想一想如何在 Canvas 上绘制签名版。...接着使用 ctx.moveTo() 方法将画笔移动到鼠标点击的位置，e.clientX 和 e.clientY 表示鼠标相对于浏览器窗口的坐标，而 canvas.offsetLeft 和 canvas.offsetTop...这样就可以将画笔移动到鼠标点击的位置了。...如果 drawing 变量的值为 true，则表示正在绘制，使用 ctx.lineTo() 方法将画笔移动到鼠标移动的位置，然后使用 ctx.stroke() 方法绘制路径。

8734 2

SVG之旅：SVG的图层和渲染顺序

不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。...我们先来看看制图软件中的图层，比如Sketch的软件中：在制图软件中，控制图层比较方便，鼠标拖动就可以，比如下面的操作：通过Sketch可以很轻易的将刚才的绘制的图形转出文件。...SVG渲染顺序从上面的代码中可以看出，在文本编辑器里编写SVG代码就可以绘制出所需要的图形。那么SVG中绘制过程有自己的基本原则：解析顺序和绘制顺序一致，都要遵守XML中元素的位置排列。...也就是说先出现的元素会出现在绘制的底层，而后出现的元素会绘制在顶层，如果元素间的位置有重叠，则会现后绘制的元素会盖住先出现的元素子节点会继承父节点的一些属性（这个和CSS的属性有点类似），比如和等整个...会缺失，所以解析时应该忽略 DTD 验证，不然会直接造成解析错误解析SVG文档时，一些元素的属性值可能有多种方式：多边形的点集，元素的，都是一个数字集合，集合的分割方式可能是空格，。

6.9K6 0

Python学习总结（1）—turtle海龟作图

dot(size=None, *color) 画点在海龟所处位置画点 size是点的大小，为整型；缺省为默认值 *color是点的颜色的英文单词，为字符串类型 stamp() 印章在海龟当前位置绘制一个海龟形状...10.使用事件 onclick(fun, btn=1, add=None) 当鼠标点击将 fun 指定的函数绑定到鼠标点击此海龟事件。...btn – 鼠标按钮编号，默认值为 1 (鼠标左键) add – True 或 False – 如为 True 则将添加一个新绑定，否则将取代先前的绑定 onrelease(fun, btn=1,...如果 fun 值为 None，则移除现有的绑定注: 在海龟上移动鼠标事件之前应先发生在此海龟上点击鼠标事件 _ turtle.ondrag(turtle.goto)在此之后点击并拖动海龟可在屏幕上手绘线条...当前海龟位置为多边形的第一个顶点 end_poly() 结束记录多边形 停止记录多边形的顶点。当前海龟位置为多边形的最后一个顶点。

1.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭