为什么两个SVG形状的减法仍然相交？
当然shape1.subtract（shape2）.Intersects（shape2）应该始终是错误的？
但是在我的论文中。为什么要这？
我正在尝试循环浏览路径列表并全部减去它们，因此没有重叠。但是由于此错误，我无法测试其剩余形状是否重叠:(
这是错误的证明：
'use strict';
window.onload = setup;
let p = null; // an alias for the paper.js global object.
let canvasWidth, canvasHeight = null;
let em = null; // relative width unit the drawing is based on
function setup()
{
p = paper;
const canvas = document.getElementById('canvasId');
canvasWidth = parseInt(document.getElementById('canvasId').attributes.width.nodeValue);
canvasHeight = parseInt(document.getElementById('canvasId').attributes.height.nodeValue);
em = canvasWidth / 100;
p.setup(canvas);
drawPicture();
}
function drawPicture()
{
const shape1 = p.Path.Circle(new p.Point(200, 200), 2*em);
shape1.fillColor = hsb(50, 0.5, 0.5, 1);
shape1.strokeColor = hsb(0, 0, 0, 1);
const shape2 = p.Path.Circle(new p.Point(230, 200), 2*em);
shape2.fillColor = hsb(100, 0.5, 0.5, 1);
shape2.strokeColor = hsb(0, 0, 0, 1);
console.log(`shape1 intersects shape1 ? ${shape1.intersects(shape1)}`);
console.log(`shape1 intersects shape2 ? ${shape1.intersects(shape2)}`);
console.log(`(shape1 less shape2) intersects shape2 ? ${shape1.subtract(shape2).intersects(shape2)}`);
}
function hsb(hue = 360, saturation = 1, brightness = 0.5, alpha = 1)
{
return new p.Color({hue: hue, saturation: saturation, brightness: brightness, alpha: alpha});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js"></script>
<body>
<canvas id="canvasId" width="1500" height="750"></canvas>
</main>Surely shape1.subtract(shape2).intersects(shape2) should always be false?
But in my paper.js code, a path with a second path removed from it still always intersects the second path. Why is this please?
I'm trying to loop through a list of paths and subtract them all so there is no overlapping. But I can't test the remaining shapes for overlap because of this error :(
Here's a demonstration of the error:
'use strict';
window.onload = setup;
let p = null; // an alias for the paper.js global object.
let canvasWidth, canvasHeight = null;
let em = null; // relative width unit the drawing is based on
function setup()
{
p = paper;
const canvas = document.getElementById('canvasId');
canvasWidth = parseInt(document.getElementById('canvasId').attributes.width.nodeValue);
canvasHeight = parseInt(document.getElementById('canvasId').attributes.height.nodeValue);
em = canvasWidth / 100;
p.setup(canvas);
drawPicture();
}
function drawPicture()
{
const shape1 = p.Path.Circle(new p.Point(200, 200), 2*em);
shape1.fillColor = hsb(50, 0.5, 0.5, 1);
shape1.strokeColor = hsb(0, 0, 0, 1);
const shape2 = p.Path.Circle(new p.Point(230, 200), 2*em);
shape2.fillColor = hsb(100, 0.5, 0.5, 1);
shape2.strokeColor = hsb(0, 0, 0, 1);
console.log(`shape1 intersects shape1 ? ${shape1.intersects(shape1)}`);
console.log(`shape1 intersects shape2 ? ${shape1.intersects(shape2)}`);
console.log(`(shape1 less shape2) intersects shape2 ? ${shape1.subtract(shape2).intersects(shape2)}`);
}
function hsb(hue = 360, saturation = 1, brightness = 0.5, alpha = 1)
{
return new p.Color({hue: hue, saturation: saturation, brightness: brightness, alpha: alpha});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js"></script>
<body>
<canvas id="canvasId" width="1500" height="750"></canvas>
</main>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这取决于。
请记住，这两个形状至少在数学上会共享边界。如果您有两条线完全相同的路径，它们会相交吗？至少在数学上，它们共享了无限的许多交叉点。
但是最终，这取决于纸张的生成新路径。这取决于纸张中布尔操作的准确性。这取决于Paper.js用于测试交叉点的算法。
如果您在两个路径上拨打
subtract（），那么您可能只需要假设它们在视觉上不会重叠即可。但是，要从代码方面解决这个问题，您可能必须跟踪自己减去哪些路径。It depends.
Remember that the two shapes will, at least mathematically, share a border. If you have two lines that follow the exact same path, do they intersect? Mathematically at least, they share infinitely many intersection points.
But ultimately it depends on how paper.js generates the new paths. It depends on how accurate the boolean operations in Paper are. And it depends on the algorithm that paper.js uses to test intersection.
If you have called
subtract()on two paths, then you'll probably just have to assume that they visually don't overlap. But to work that out code-wise, you are probably going to have to keep track yourself of which paths have been subtracted.