Raphaël как найти точки пересечения двух .path

[tav25]

Есть два элемента .path a и b они пересекаются между собой, как получить координаты их пересечения.

<script src="raphael.js"></script>
<script src="jquery-1.2.3.js"></script>
<style media="screen">
#canvas {
        height: 640px;
        width: 1000px;
        background-color: #D3D3D3;
}
</style>
<script>
$(document).ready(function(){
var r = Raphael("canvas");
var b=r.path("M 25,5 L 20,100 ");
var a = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z");
})</script>
<div id="canvas"></div>

[tav25]

Работает но это не самый быстрый и красивый вариант.

<script src="raphael.js"></script>
<script src="jquery-1.2.3.js"></script>
<style media="screen">
#canvas {
        height: 300px;
        width: 500px;
        background-color: #D3D3D3;
}
#r1 {
        position:absolute;
        left:0px;
        top:0px;
        width:1000px;
        height:259px;
        z-index:1;
    }
</style>
<script>
$(document).ready(function(){
var paper = Raphael("canvas");
paper.clear();
//var shapeA=paper.path("M20,50c0,30,80-50,90,0c0,450-80-50-80,0z");
var shapeA=paper.path("M 25,5 L 50,100 ");
var shapeB=paper.path("M18,53c0,50,80-50,80,0c0,50-80-50-80,0z");

var ax = []; //x v sm
var ay = []; //y v sm
var bx = []; //м
var by = []; // м
var b = 0; //  п
while ((shapeA.getTotalLength()) > b) {
ax[b]=shapeA.getPointAtLength(b).x.toFixed(0)*1
ay[b]=shapeA.getPointAtLength(b).y.toFixed(0)*1
c= paper.circle(ax[b],ay[b], 0.7).attr("fill", "#FF0000").attr("stroke", "none");
b=b+1;
}
b=0
while ((shapeB.getTotalLength()) > b) {
bx[b]=shapeB.getPointAtLength(b).x.toFixed(0)*1
by[b]=shapeB.getPointAtLength(b).y.toFixed(0)*1
c= paper.circle(bx[b],by[b], 0.5).attr("fill", "#000000").attr("stroke", "none");
b=b+1;
}
//
var m1 = []; // м
var m2 = []; // м
m1[0]=Math.max.apply(null, ax)
m1[1]=Math.max.apply(null, bx)
m2[0]=Math.min.apply(null, ax)
m2[1]=Math.min.apply(null, bx)
var l1 = []; // м
var l2 = []; // м
l1[0]=Math.max.apply(null, ay)
l1[1]=Math.max.apply(null, by)
l2[0]=Math.min.apply(null, ay)
l2[1]=Math.min.apply(null, by)


b1=Math.max.apply(null, l2)//39
n1=Math.min.apply(null, l1)//67
b2=Math.max.apply(null, m2)///20
n2=Math.min.apply(null, m1)///98
console.log(b1+"=b1 Y n1="+n1);
console.log(b2+"=b2 X n2="+n2);
/*
 c= paper.circle(n2, 1, 1).attr("fill", "#228B22").attr("stroke", "none");
 c= paper.circle(b2, 1, 1).attr("fill", "#FF0000").attr("stroke", "none");
 c= paper.circle(1,n1, 0.5).attr("fill", "#228B22").attr("stroke", "none");
 c= paper.circle(1,b1, 0.5).attr("fill", "#FF0000").attr("stroke", "none");
 */
//с=paper.path("M "+n2+","+n1+" L "+n2+","+b1).attr("stroke", "#FF0000").attr({"stroke-width": 0.3 });//z
с=paper.path("M "+b2+","+n1+" L "+b2+","+b1).attr("stroke", "#FF0000").attr({"stroke-width": 0.3 });//k
//с=paper.path("M "+n2+","+n1+" L "+b2+","+n1).attr("stroke", "#FF0000").attr({"stroke-width": 0.3 });//z
с=paper.path("M "+n2+","+b1+" L "+b2+","+b1).attr("stroke", "#FF0000").attr({"stroke-width": 0.3 });//k
////
b=0*1
v=0*1
while ((n2-b2)+1 > b){
while ((n1-b1)+1 > v){
shapeA.toFront();
if (paper.getElementByPoint(b2+b, b1+v) === shapeA)
{
shapeB.toFront();
if (paper.getElementByPoint(b2+b, b1+v) === shapeB)
{
console.log('внутри', b2+b, b1+v); // точки внутри фигуры
c= paper.circle(b2+b,b1+v, 0.5).attr("fill", "#FFFF00").attr("stroke", "none");			
}
}
   
c= paper.circle(b2+b,b1+v, 0.2).attr("fill", "#00BFFF").attr("stroke", "none");
//console.log((b2+b)+"x y"+(b1+v));
v++;
}
v=0
b++;
}
////
shapeA.hide()
shapeB.hide()
})</script>
<div id="r1">
<div id="canvas"></div>
</div>

[tav25]

Более красивый вариант

<script src="raphael.js"></script>
<script src="jquery-1.2.3.js"></script>
<style media="screen">
#canvas {
        height: 300px;
        width: 500px;
        background-color: #D3D3D3;
}
#r1 {
        position:absolute;
        left:0px;
        top:0px;
        width:1000px;
        height:259px;
        z-index:1;
    }
</style>
<script>
$(document).ready(function(){
var paper = Raphael("canvas");
paper.clear();

var a=paper.path("M 25,5 L 50,100 ");
var b=paper.path("M18,53c0,50,80-50,80,0c0,50-80-50-80,0z");
var c=paper.path("M20,50c0,30,80-50,90,0c0,450-80-50-80,0z");

function point_to_path(a,b){
if (a.getTotalLength()<b.getTotalLength()){
    a_max=a.getTotalLength()
    }else{
    a_max=b.getTotalLength()}
console.log(a_max);
var i = 0;
var i2=0
ptp_x = [];
ptp_y = [];
while (a_max > i) {
var ax=a.getPointAtLength(i).x.toFixed(0)*1
var ay=a.getPointAtLength(i).y.toFixed(0)*1
var cl= paper.circle(ax,ay, 0.7).attr("fill", "#FF0000").attr("stroke", "none");
//
a.toFront();
if (paper.getElementByPoint(ax, ay) === a)
{
b.toFront();
if (paper.getElementByPoint(ax, ay) === b)
{
ptp_x[i2] =ax;
ptp_y[i2]=ay;
console.log('внутри', ptp_x [i2], ptp_y [i2]); // точки внутри фигуры
var cl= paper.circle(ptp_x [i2],ptp_y [i2], 0.5).attr("fill", "#FFFF00").attr("stroke", "none");
		
}
}
//
i=i+1;
}}


point_to_path(b,c)

a.hide()
b.hide()
c.hide()

})</script>
<div id="r1">
<div id="canvas"></div>
</div>