拉斐尔路径端点的 X/Y 位置

发布于 2024-12-08 04:06:05 字数 578 浏览 1 评论 0原文

我需要检索 Raphael 中绘制的路径末端的 X/Y 坐标。我找到了一种方法，可以在 SVG 浏览器中随后内省路径，但这种方法在 VML 浏览器中不起作用。

示例：

var paper = Raphael('canvas', 200, 200);
var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]);
var lastP = p.attrs.path[p.attrs.path.length - 1];
paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3);

http://jsfiddle.net/sY4Up/1/

在 Chrome 中，在以下位置绘制一个圆圈通过路径自省的端点。在 IE 6/7/8 中，不会绘制圆，因为路径定义未分解/标准化。

原文

I need to retrieve the X/Y coordinate of the end of a path drawn in Raphael. I've found a way that works by introspecting the path afterwards in SVG browsers but this approach does not work in VML browsers.

Example:

var paper = Raphael('canvas', 200, 200);
var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]);
var lastP = p.attrs.path[p.attrs.path.length - 1];
paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3);

http://jsfiddle.net/sY4Up/1/

In Chrome, a circle gets drawn at the endpoint through path introspection. In IE 6/7/8, the circle does not draw because the path definition does not get decomposed/normalized.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

喜爱纠缠 2024-12-15 04:06:05

使用 getPointAtLength 和 getTotalLength 查找位置。

window.onload = function() {
var paper = Raphael('canvas', 200, 200);
var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]);
var lastP = p.attrs.path[p.attrs.path.length - 1];
paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3);

var pt = p.getPointAtLength(p.getTotalLength());
paper.circle(pt.x,pt.y,10);

};

use getPointAtLength and getTotalLength to find the position.

window.onload = function() {
var paper = Raphael('canvas', 200, 200);
var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]);
var lastP = p.attrs.path[p.attrs.path.length - 1];
paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3);

var pt = p.getPointAtLength(p.getTotalLength());
paper.circle(pt.x,pt.y,10);

};

回复收藏 0 原文

~没有更多了~