拉斐尔路径交叉点不起作用

2024-06-02

我对拉斐尔和.pathIntersection() method.

JSFiddle 示例 http://jsfiddle.net/t6gWt/2/

您可以看到有两条线都与曲线相交,但当我使用.pathIntersection() method.

有一个未解决的问题Github https://github.com/DmitryBaranovskiy/raphael/issues/539有可能的原因,但我想确保我也没有做任何愚蠢的事情。因此,如果有人能看到我已经完成的问题,或者可能确认我使用正确,并且这是库的问题,那就太棒了。

Thanks.

EDIT: 这把小提琴 http://jsfiddle.net/t6gWt/7已由提供Speransky Danil并演示当点靠近时线相交不起作用。可能是一种向下看的途径作为可能的原因。


不知道这是否仍然有帮助(但谁知道呢)。我相信.pathIntersection有一个错误。我花了很多时间试图修复我参与的项目中的问题但无济于事。所以我使用了另一种方法Raphael.getPointAtLength().
看看我做的这个小提琴:http://jsfiddle.net/mosheh/SKLaQ/ http://jsfiddle.net/mosheh/SKLaQ/
Code:

// Computes a path string for a circle
Raphael.fn.circlePath = function(x , y, r) {      
  return "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x - 0.1)+","+(y-r)+" z";
} 

// Computes a path string for a line
Raphael.fn.linePath = function(x1, y1, x2, y2) {
    return "M" + x1 + "," + y1 + "L" + x2 + "," + y2;
}

var x1 = 45.4159292035397;
var y1 = 81.0796460176991;
var r1 = 8.330383480825958;

var x2 = 43.4159292035397;
var y2 = 22.76696165191737;
var r2 = 8.330383480825958;
//Debug: c1 x,y,r 943.4159292035397 , 481.0796460176991 , 8.330383480825958 
//Debug: c2 x,y,r 943.4159292035397 , 422.76696165191737 , 8.330383480825958 

var paper = Raphael(document.getElementById("raphael"), 600, 600);
var c1 = paper.circle(x1, y1, r1);
c1.attr({fill: 'red'});
var c2 = paper.circle(x2, y2, r2);

// Get the path intersections
// In this case we are guaranteed 1 intersection, but you could find any
// intersection of interest.

// Note: pathIntersection has a bug when x1 and x2 are close to each other
// (play arround with the x1 value above and you will see //that when x1 is
// close to x2 then pathIntersection will return a null value) - also depends
// on the radius size of the circles - very complex!! - spent a lot of time
// trying to fix this - not to mention that I discovered this problem by chance
// (in a huge connected graph with nodes and links - some nodes were connected
// OK but others not which were suppposed to be connected!!)

//var c1i = Raphael.pathIntersection(linePath, c1path)[0];
//var c2i = Raphael.pathIntersection(linePath, c2path)[0];
//var line = paper.path(paper.linePath(c1i.x, c1i.y, c2i.x, c2i.y));

//So here is the alternative way which worked for me:
//Draw a line between 2 circles starting at their circumferences - this works

//Get a path line starting from the center of circle 1
var linePath1 = paper.linePath(x1, y1, x2, y2);

//Get a path line starting from the center of circle 2
var linePath2 = paper.linePath(x2, y2, x1, y1);

//Get a point on the line from center of circle 1 on the circumference
var fromC1 = Raphael.getPointAtLength(linePath1, r1);

//Get a point on the line from center of circle 2 on the circumference
var fromC2 = Raphael.getPointAtLength(linePath2, r2);

//Now let Raphael draw this line - and voila, the line just touches the
//circumferences of both circles - cool
var line = paper.path(paper.linePath(fromC1.x, fromC1.y, fromC2.x, fromC2.y));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

拉斐尔路径交叉点不起作用 的相关文章

  • 为什么 Javascript sort() 函数没有给出预期的输出? [复制]

    这个问题在这里已经有答案了 可能的重复 排序不适用于整数 https stackoverflow com questions 1063007 sort not working with integers 如何在javascript排序方法中
  • 使用 ReactJS 旋转图像预览

    我正在尝试使用 ReactJS 旋转图像的预览 因此 我首先允许渲染预览的上传功能 然后在用户点击上传之前 我希望他们可以选择根据自己的喜好旋转图像 这是我用来预览图像的 class ImageUpload extends React Co
  • 系统js语法错误,IE11

    我有一个 Angular 2 应用程序可以在 Firefox 和 Chrome 中工作 但在 IE 中却没有那么多工作 根据我的堆栈跟踪 我的 System js 设置似乎存在问题 这是我在网络控制台中看到的错误描述 Error Syste
  • EXT JS中有全局变量吗

    在 java 和 C 中 我们可以全局存储变量并从项目中的任何位置访问它的值 比如说 我在一个名为Residence我正在保存residenceNumber这是一个INT到一个名为的全局变量houseNumberGlobalVariable
  • 切换 Ag-Grid 中的浮动过滤器?

    我试图通过开关或按钮单击来确定浮动过滤器的显示 看起来很简单 我应该能够在 true 和 false 之间切换 将该值提供给网格选项中的浮动过滤器 然后刷新标题 对吗 不幸的是 网格似乎总是落后一步 当我第一次点击时 什么也没有发生 当我将
  • 停止倒数计时器 Javascript onClick

    给出以下代码 myButton02 click function myButton02 hide counter animate width toggle var count 65 var counter setInterval timer
  • 如何让机器人状态显示为“手机在线”

    我看到 NotSoBot 的状态为在线在移动 https i stack imgur com IiF4k png 有没有办法可以在discord js 中做到这一点 我知道这已经很旧了 但更简单的方法是将其添加到定义客户端 机器人的位置 c
  • Angularjs 使用 ng-init 为 ng-model 赋值

    您好 我有以下问题 看起来很简单并且应该有效 但事实并非如此 在我的代码中我输入了
  • 链接index.html client.js 和 server.js

    我从 Node js 开始 我的第一个程序已经遇到了问题 下面是我正在使用的代码 索引 html
  • 我以为我了解范围

    有人可以告诉我为什么 x 的最后一次记录等于0而不是1 我想因为它是在函数之外声明的 所以它具有全局范围 然后在函数中它的值设置为1并且该值将保持原样一个全球性的 我知道函数内的第一个 x 值是全局的 因为没有 var 关键字声明的任何变量
  • up() 和 down() 与 Ext.getCmp()

    我很困惑我需要在 up down 和 Ext getCmp ID 之间使用哪一个作为 grep 对象 对我来说 定义对象的 ID 并通过 Ext getCmp ID 检索对象更容易 而且代码看起来更干净 例如 console log thi
  • Netlify 正在显示我的 Gatsby 网站的 html 版本

    网站建设位于https 5efbc255ca51be00080b5219 epic raman 086510 netlify app https 5efbc255ca51be00080b5219 epic raman 086510 netl
  • 如何在从数据库异步加载中用占位符替换不存在的图像

    我有一个包含图像的数据库 我需要根据用户的请求即时加载这些图像 这些图像将作为包含 div 容器中的单独 s 的背景图像 类似于图像滚动条 该数据库当前是本地数据库 但这不是我的问题 问题是数据库可能没有我请求的所有图像 并且我可能会得到一
  • ag-Grid 中的行格式

    我们需要有条件地将行文本设置为粗体 目前它仅适用于单个单元格 但我们需要在所有列单元格上应用文本粗体 应用格式设置后 isBold 列必须隐藏 删除 此列仅用于格式化 如何应用文本缩进 10px isBold 列包含真实值的第一列的 有可能
  • CORS:为什么我的浏览器不发送 OPTIONS 预检请求?

    从我读到的内容来看CORS https en wikipedia org wiki Cross origin resource sharing 我理解它应该按如下方式工作 客户端的脚本尝试获取资源从服务器不同的起源 浏览器拦截这个请求并首先
  • getCompatedStyle 类似于 IE8 的 javascript 函数

    我正在尝试在 Java GWT 代码中编写一个 Javascript 函数 该函数获取以下样式的值 direction fontFamily fontSize fontSizeAdjust fontStyle fontWeight lett
  • 当 JavaScript 抛出异常时不要停止它

    我正在使用 JavaScript 编写一个 Windows 边栏小工具 现在我想捕获所有 JavaScript 异常并将其记录到文本文件中 一个问题是 当任何一行抛出异常时 下一行将不会被执行 是否可以自动捕获异常 以便执行以下 JavaS
  • 如何捕获 google 地图的无效 API 密钥

    我有这个代码 如果密钥无效 则会弹出警报 但我想在这种情况下执行一些操作 但我不知道如何连接它 有任何想法吗 Google 不提供检查 Google 地图 API 密钥的外部方法 因此 您无法使用例如查询某些服务 此代码有效吗abcde12
  • Jquery 脉动改变颜色或图像

    我正在尝试使用 jquery 脉动代码让 div 改变颜色 但我希望它从红色变为黑色 但我听说要做到这一点 你必须下载某个插件 所以我希望它脉动为图片 到目前为止我有这两个代码 img src 36 gif alt width 105 he
  • 如何防止外部 CSS 添加和覆盖 ReactJS 组件样式

    我有一个自定义的 ReactJS 组件 我想以某种方式设置样式 并将其作为插件提供给许多不同的网站 但是 当网站使用全局样式 Twitter bootstrap 或其他 css 框架 时 它会添加并覆盖我的组件的样式 例如 全局 css l

随机推荐

  • iOS SWIFT - WebRTC 从前置摄像头更改为后置摄像头

    WebRTC 视频默认使用前置摄像头 效果很好 但是 我需要将其切换到后置摄像头 但我无法找到任何代码来执行此操作 我需要编辑哪一部分 是 localView 或 localVideoTrack 还是捕获器 斯威夫特3 0 对等连接只能有一
  • DataContractSerializer 事件/委托字段问题

    在我的 WPF 应用程序中 我正在使用DataContractSerializer序列化对象 我发现它无法序列化具有事件或委托声明的类型 考虑以下失败的代码 Serializable public abstract class BaseCl
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效
  • 如何识别图形线条

    我有以下格式的路径的 x y 数据 示例仅用于说明 seq p1 p2 0 20 2 3 1 20 2 4 2 20 4 4 3 22 5 5 4 22 5 6 5 23 6 2 6 23 6 3 7 23 6 4 每条路径都有多个点 它们
  • 将数组值导出到 csv 文件 java

    我只需要帮助将数组元素导出到 csv 文件 我不知道我的代码有什么问题 任何帮助将不胜感激 谢谢 for int index 0 index lt cols length index FileWriter fw new FileWriter
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att
  • 将 Hbase 与 PHP 集成 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我已经安装了 Hbase 现在我正在寻找一些 PHP 库来将 hbase 与 PHP 集成 我尝试了 2 个库 第一个是我尝试与 th
  • SimpleXML 返回空数组

    我正在尝试使用 Google Maps API 和 PHP SimpleXML 获取城市的纬度和经度 我尝试这样做 xml simplexml load file http maps googleapis com maps api geoc
  • R - 加速近似日期匹配。 idata.frame?

    我正在努力有效地执行两个数据帧之间的 关闭 日期匹配 这个问题探索了一个解决方案 使用idata frame来自plyr包 但我也对其他建议的解决方案感到非常满意 这是两个数据框的非常简单的版本 sampleticker lt data f
  • Powershell 中的“$”是什么?

    是什么意思 在 Powershell 中 Edit TechNet 答案 http technet microsoft com en us library hh847768 aspx同义反复 没有解释 成功 或 失败 的含义 包含上次操作的
  • 将我的免费应用程序从 Universal 升级到仅限 iPhone

    我释放我的free app到 appStore 它的版本是 1 0 它是一个Universal app 现在我想发布 1 1 版本到 appStore 我将其升级到iPhone only appStore会拒绝我吗 我已阅读类似的问题 ht
  • 如何将 SQL“LIKE”与 LINQ to Entities 结合使用?

    我有一个文本框 允许用户指定搜索字符串 包括通配符 例如 Joh Johnson mit ack on 在使用 LINQ to Entities 之前 我有一个存储过程 该存储过程将该字符串作为参数并执行以下操作 SELECT FROM T
  • UI Router 将 url 与 hash(片段)相匹配

    使用 UI 路由器 我需要将 URL 与其中包含的哈希 片段 进行匹配 HTML5 模式 state myState url path id page section templateUrl template html controller
  • CUDA 添加矩阵的行

    我试图将 4800x9600 矩阵的行加在一起 得到一个 1x9600 的矩阵 我所做的是将 4800x9600 分成 9 600 个矩阵 每个矩阵长度为 4800 然后我对 4800 个元素进行缩减 问题是 这真的很慢 有人有什么建议吗
  • 声明 for 循环变量时 &mut 会做什么吗?

    考虑以下 愚蠢的 程序 fn main let mut array mut 1u8 2u8 3u8 for mut value in array 它编译并运行正常 尽管如预期的那样警告未使用的变量 不必要的可变性 但有什么作用 mut做在f
  • AWK 错误:尝试在标量上下文中使用数组

    我正在学习AWK 这是一个简单的代码片段 我尝试将字符串拆分为数组并迭代它 BEGIN split a b c a for i 1 i lt length a i print a i 运行此代码时 我收到以下错误 awk awk txt 4
  • 如何使用placement new重新初始化该字段?

    我的课程包含字段 private OrderUpdate curOrderUpdate 我一遍又一遍地使用它 经常需要重新初始化 for int i 0 i lt entries size i auto entry entries i ne
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male
  • [GoF]-ConcreteSubject 可以覆盖通知方法吗?

    我正在模拟一种情况 其中存在 通知框 观察者 list1 list2 list3 这个科目 现在我会制作一张图表 其中使用观察者模式描述每个列表实现不同类型的notify 这一事实 例如 列表状态的某些变化只需要按照某些标准通知给某些观察者
  • 拉斐尔路径交叉点不起作用

    我对拉斐尔和 pathIntersection method JSFiddle 示例 http jsfiddle net t6gWt 2 您可以看到有两条线都与曲线相交 但当我使用 pathIntersection method 有一个未解