问题描述
我想将 Raphael.js 中的多边形切成 4 到 8 个随机部分，并为每个部分创建自己的路径。这个想法是在多边形的轮廓中随机确定点，并用线将它们连接起来作为路径。
我的问题是：我如何获得与 Raphael.pathIntersection 相交的点 - 我似乎无法让它工作？
代码如下： HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://pagecdn.io/lib/raphael/2.3.0/raphael.min.js"> </script>
<body>
<div id="superxga" style="height: 600; width: 1000; background-color: white;"></div>
<div id="lsg" style="height: 500; width: 500; background-color: white;"></div>
</body>
<script>
window.onload = function() {
//I. Presets
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//I.I Raphael playground and obligatory texts and elements
var paper = Raphael('superxga',1000,600);
var paperSolution = Raphael('lsg',500,500);
//var rahmen = paper.rect(3,3,996,650).attr({ 'stroke': '#000','stroke-opacity': 1,'fill': '#ECEEEF' });
var color = '#3b5998';
//Obligatory Texts and elements
//abcde
var text = paper.text(100,475,"(A)").attr({
"fill": "#000000","font-weight": "bold","font-size": "12px"
});
var text = paper.text(250,"(B)").attr({
"fill": "#000000","font-size": "12px"
});
var text = paper.text(400,"(C)").attr({
"fill": "#000000","font-size": "12px"
});
var text = paper.text(550,"(D)").attr({
"fill": "#000000","font-size": "12px"
});
var text = paper.text(700,"(E)").attr({
"fill": "#000000","font-size": "12px"
});
var text = paper.text(700,300,"Keine der Antwort-\nmöglichkeiten\nist richtig.").attr({
"fill": "#000000","font-weight": "bold"
});
//I.II Methods,Shuffle Arrays & Random numbers
///////////////////
//I.II a) Methods
// number of section parts
var numberOfParts = Math.floor(Math.random() * 4) + 3;
//Circle parts function
var rad = Math.PI / 180;
function sector(cx,cy,r,startAngle,endAngle,params) {
var x1 = cx + r * Math.cos(-startAngle * rad),x2 = cx + r * Math.cos(-endAngle * rad),y1 = cy + r * Math.sin(-startAngle * rad),y2 = cy + r * Math.sin(-endAngle * rad);
return paper.path(["M",cx,"L",x1,y1,"A",+(endAngle - startAngle > 180),x2,y2,"z"]).attr(params);
}
//polygones function
function NGon(x,y,N,circRad) {
var path = "",n,temp_x,temp_y,angle;
for (n = 0; n <= N; n += 1) {
// the angle (in radians) as an nth fraction of the whole circle
angle = n / N * 2 * Math.PI;
// The starting x value of the point adjusted by the angle
temp_x = x + Math.cos(angle) * circRad;
// The starting y value of the point adjusted by the angle
temp_y = y + Math.sin(angle) * circRad;
// Start with "M" if it's the first point,otherwise L
path += (n === 0 ? "M" : "L") + temp_x + "," + temp_y;
}
return path;
}
// function for creating inner circle radii for all polygons (for points)
function radInCirc(corner,rad) {
// formulas not insertet but their results as dezimal numbers
if (corner == 5) {
//calculate sidelength (a) from the outer circle radius r(u) --> Formula: a = r(u)/0.8507
var sideLength = rad / 0.8507;
var innerRad = sideLength * 0.6881;
} else if (corner == 6) {
// not necessary because a = r(u)
var innerRad = rad * 0.866;
} else if (corner == 7) {
//calculate sidelength (a) from the outer circle radius r(u) --> Formula: a = r(u)2*(sin(pi/7))
var sideLength = rad * 0.86776747823;
var innerRad = sideLength / 0.96314923761;
} else if (corner == 8) {
//calculate sidelength (a) from the outer circle radius r(u) --> Formula: a = r(u) * (√(2-√2))
var sideLength = rad * 0.7653668647301795434569199680608;
var innerRad = sideLength * 1.20710678119;
}
return innerRad;
}
//I.II b) Shuffle arrays & random numbers
//Array shuffle function
function shuffle(a) {
for (let i = a.length; i; i--) {
let j = Math.floor(Math.random() * i);
[a[i - 1],a[j]] = [a[j],a[i - 1]];
}
}
//function for random numbers
function getRndInteger(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//Shuffle localization of answer-objects
var x = [100,250,400,550];
var y = [100,550];
shuffle(x);
shuffle(y);
//II. Raphael specific elements
// Random count of corners and one random degree plus length of each side
var cornerCount = getRndInteger(5,8);
var winkel = getRndInteger(0,360);
var sides = 50;
//answer objects randomly shuffled
var pentagon = paper.path(NGon(x[0],5,50)).attr('fill',color);
var hexagon = paper.path(NGon(x[1],6,color);
var heptagonn = paper.path(NGon(x[2],7,color);
var octagon = paper.path(NGon(x[3],8,color);
var dragger = 0;
//radius of innercircle - 5 is for plausibility of the random point inside the inner circle
var radius = radInCirc(cornerCount,sides) - 5;
//creating points with help of random degree ?? why 100 200?
var pointX = 100 + (radius * Math.cos(winkel * (Math.PI / 180)));
var pointY = 200 + (radius * Math.sin(winkel * (Math.PI / 180)));
console.log(radius,sides,pointX,pointY);
// VIELECKE 108 120 129 135
//draw random polygon
var path = paperSolution.path(NGon(10,20,cornerCount,sides)).attr('stroke-width',0);
var path = paper.path(NGon(100,200,0);
//create hexagon
var hexagon = paper.path(NGon(75,50,color);
//create rectangle for playground
var rect = paper.rect(0,150,150);
//get the full length of the path of the searched figure
var lengthfigure = hexagon.getTotalLength();
//arrays to get random positions in the figure
pointLocations = [];
points = [];
lines = [];
//loop for creating the points and lines to slice the polygon
for (var iterate = 0; iterate < 4; iterate++) {
//create location of every point randomly
pointLocations.push(getRndInteger(0,lengthfigure));
//add point locations in points array (x and y koordinates)
points.push(hexagon.getPointAtLength(pointLocations[iterate]));
//create lines by skipping odd number (because you need two points for a line)
if (!iterate % 2 == 0) {
//draw lines as path
lines.push(paper.path(['M',points[iterate - 1]['x'],points[iterate - 1]['y'],'L',points[iterate]['x'],points[iterate]['y']]).attr('fill','#ff0000'));
//draw points at outline of polygone for better visualization
paper.circle(points[iterate]['x'],points[iterate]['y'],5).attr('fill','#b2b2b1');
paper.circle(points[iterate - 1]['x'],'#b2b2b1');
}
}
};
</script>
这是小提琴： https://jsfiddle.net/Ldnk7wb8/
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）