问题

现有已知折线有多段，当双击折线的时候，需要将该双击的位置点Q 添加到折线上（排除端点情况），如何去判断Q要添加在折线的哪一段，或者Q分割了折线的哪一段？？

分析

方式1
一开始选用斜率计算，即平面中三点m,n,Q, Q与m,n 任意一点连线的斜率与 m,n 连线斜率相同，则三点共线（与之相似的还有计算向量叉乘等，都是基于斜率的判断），这思路在纯粹的数学模型中是没问题的，但是在js中会有以下问题

js浮点运算并不准确，在计算斜率的时候会丢失精度
即使设置了阈值，但是精度丢失的程度根据m,n两点连线的斜率有关，因此并不能有效的设置阈值，无效的阈值是指，当阈值较小的时候，计算误差会容易大于阈值，导致新增点不属于任何线段，当阈值较大的时候，计算误差会容易小于阈值，导致新增点永远被判定为最后一段。

方式二
鉴于以上测试结果，使用另一个判断标准，点到直线的距离，即使浮点运算不准确，仍可以设置一个有效的阈值，当Q距离已知线段的距离为[0，阈值]，且与线段两端点方向相反（区分多端斜率相同的线段）的时候就判断Q在直线上。
实际开发中需要分析线宽，新增折点触发时机等设置具体的阈值

svg 折线添加新的折点相关推荐

html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
Ubuntu下添加新分区并设置挂载点
Ubuntu下添加新分区并设置挂载点最近在做Android项目,可是解压根文件系统以后,就报警说硬盘不够.当初设置使用的大小为15G.不过扩展分区还是很方便的.当然首先你得设置添加使用的硬盘大小,这 ...
Android学习笔记之Android Studio添加新的Activity
1.创建Android项目工程:AndroidTest 创建过程可参考网上诸多教程. 2.添加新的Activity,步骤如下 a. 在layout文件夹上右键,New-Activity-相应Activ ...
linux系统下添加新硬盘的方法详解
对于linux新手来说,在linux上添加新硬盘,是很有挑战性的一项工作. 在Linux服务器上把硬盘接好,启动linux,以root登陆. fdisk -l ## 这里是查看目前系统上有几块硬盘 D ...
深度学习目标检测指南：如何过滤不感兴趣的分类及添加新分类？
编译 | 庞佳责编 | Leo 出品 | AI 科技大本营(公众号ID:rgznai100) AI 科技大本营按:本文编译自 Adrian Rosebrock 发表在 PyImageSearch 上 ...
【MySQL】面试官：如何添加新数据库到MySQL主从复制环境？
今天,一名读者反馈说:自己出去面试,被面试官一顿虐啊!为什么呢?因为这名读者面试的是某大厂的研发工程师,偏技术型的.所以,在面试过程中,面试官比较偏向于问技术型的问题.不过,技术终归还是要服务于业务的 ...
Linux下对文件的操作及添加新用户
Linux下对文件的操作及添加新用户一.对文件的操作 1.打包压缩文件 2.解压缩文件 3.对文件操作的其他命令二.创建新用户一.对文件的操作 1.打包压缩文件 2.解压缩文件 3.对文件操作的 ...
R语言为dataframe添加新的数据列（add new columns）：使用R原生方法、data.table、dplyr等方案
R语言为dataframe添加新的数据列(add new columns):使用R原生方法.data.table.dplyr等方案目录 R语言为dataframe
R语言为dataframe添加新的数据列（横向拼接、Appending columns，Unioning columns）:使用R原生方法、data.table、dplyr等方案
R语言为dataframe添加新的数据列(横向拼接.Appending columns,Unioning columns):使用R原生方法.data.table.dplyr等方案目录 R语言为dat

svg 折线添加新的折点

问题

分析

svg 折线添加新的折点相关推荐

最新文章

热门文章