我对Chrome的SVGGeometryElement版本有问题,isPointInFill()(适用于Firefox)

mw3dktmi 于 11个月前发布在 Go

关注(0)|答案(1)|浏览(154)

https://jsfiddle.net/awebnoyz/
如果一个点位于该区域内，我需要每秒检查几千条路径。path.isPointInFill（point）在Firefox中可以做到这一点，而Chrome返回false。
我只想在不绘制任何东西的情况下进行检查，但Chrome似乎只在元素实际添加到文档中时才起作用。
有什么建议吗？

const sPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
sPath.setAttribute('d', "M0 0 L10 0 L10 10 L0 10 Z");
const sPoint = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGPoint();
sPoint.x = 5;
sPoint.y = 5;

console.log("virtual:" + sPath.isPointInFill(sPoint));
//chrome:false, firefox:true

//now with actually adding an svg and the path to the document, both return true
svg = document.documentElement.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"))
svg.appendChild(sPath);
console.log("appended:" + sPath.isPointInFill(sPoint));
svg.removeChild(sPath);

字符串
我目前没有想法，而是使用光线投射，这“只”需要10倍的时间：）

google-chrome

来源：https://stackoverflow.com/questions/75689107/i-have-a-problem-with-chromes-version-of-svggeometryelement-ispointinfill-wo

1条答案

按热度按时间

llycmphe1#

Chrome确实支持通过CSS设置d属性，所以他们不支持不在DOM中的元素的这种方法，因此所有的CSS规则都不能计算。
根据您的需要，您可以使用Path2D(svgString)构造函数沿着canvas 2D isPointInPath()方法：

const ctx = document.createElement("canvas").getContext("2d");
const path = new Path2D("M0 0 L10 0 L10 10 L0 10 Z");
const pt = { x: 5, y: 5 }
console.log(ctx.isPointInPath(path, pt.x, pt.y));

字符串

赞(0）回复(0）举报 11个月前

我来回答

我对Chrome的SVGGeometryElement版本有问题,isPointInFill()(适用于Firefox)

1条答案

相关问题

热门标签

最新问答