- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在从事一个使用 HTML 5 Canvas 设计系统艺术作品的项目。为了让我的作品更加有机和多样化,我想要一个创建 reuleaux 多边形的函数。我认为可能有一种方法可以将我的 draw_sharp_polygon(center_position, radius, number_of_sides, regular, anticlockwise)
函数转换为我需要的函数,但我不确定如何执行此操作。 我需要使用大量的 context.lineTo()
函数还是我可以使用 context.arcTo()
函数某种方式?
function draw_sharp_polygon(center_position, radius, number_of_sides, regular, anticlockwise)
{
if(typeof center_position == 'undefined')
center_position = new Position();
if(typeof radius == 'undefined')
radius = dice_roll(diagonal);
if(typeof number_of_sides == 'undefined' || number_of_sides < 3)
number_of_sides = dice_roll(10);
if(typeof regular == 'undefined')
regular = coin_toss();
if(typeof anticlockwise == 'undefined')
anticlockwise = coin_toss();
context.moveTo(center_position.x + radius, center_position.y)
if(regular)
{
var circular_angle_division = (Math.PI * 2)/number_of_sides;
circular_angle_division = anticlockwise ? -1 * circular_angle_division : circular_angle_division;
for(var i = 1; i < number_of_sides; i++)
{
context.lineTo(radius * Math.cos(circular_angle_division * i),radius * Math.sin(circular_angle_division * i));
}
}
else
{
var amount_of_circle_taken = 0;
var direction = anticlockwise ? -1 : 1;
var sides_left = number_of_sides;
for(var i = 1; i < number_of_sides; i++)
{
if(i < number_of_sides -1)
{
var circular_angle_division = get_random_value(1, (((Math.PI * 2) - amount_of_circle_taken)/number_of_sides*(sides_left / 2)));
amount_of_circle_taken += circular_angle_division;
}
else
{
var circular_angle_division = (Math.PI * 2) - amount_of_circle_taken;
}
context.lineTo(radius * Math.cos(direction * circular_angle_division * i),radius * Math.sin(direction * circular_angle_division * i));
}
}
}
这就是我的平边多边形。 我想知道是否有一种方法可以使用 context.arcTo()
而不是 context.lineTo()
来创建 reuleaux 多边形。
我打算发布一个 Reuleaux 三 Angular 形的示例,但我没有足够的声誉。维基百科有一个很好的例子。
附言我还没有在我的任何个人项目中使用 jQuery,因为我觉得它们中的大多数都可以成为独立 javascript 库的一部分。 所以请不要使用 jQuery 回答。
最佳答案
arcTo()
所需的切点实际上位于圆弧端点之间的外接圆上。所需的半径可以用以下公式计算:
reuleaux_radius = radius * sqrt(2 + 2*cos(pi / number_of_sides))
相当于
reuleaux_radius = radius * sqrt(2 + 2*cos(angle2 - angle1))
完整代码:
var taget = document.getElementById('target');
var context = target.getContext('2d');
var sides = 3;
var radius = 100;
var center = new Position(150,150);
// normal polygon
context.beginPath();
draw_sharp_polygon(center, radius, sides);
context.strokeStyle = 'silver';
context.stroke();
// circle
context.beginPath();
context.arc(center.x, center.y, radius, 0, 2*Math.PI, false);
context.strokeStyle = 'silver';
context.stroke();
// reuleaux polygon
context.beginPath();
draw_reuleaux_polygon(center,radius,sides);
context.strokeStyle = 'black';
context.stroke();
function Position(x, y)
{
this.x = x || 0;
this.y = y || 0;
}
function draw_reuleaux_polygon(center_position, radius, number_of_sides)
{
if(typeof center_position == 'undefined')
throw new Error("center_position not defined");
if(typeof radius == 'undefined')
throw new Error("radius not defined");
if(typeof number_of_sides == 'undefined' || number_of_sides < 3)
throw new Error("number_of_sides not defined");
context.moveTo(center_position.x + radius, center_position.y);
for (var index1 = 0; index1 < number_of_sides; index1++)
{
// point 1 = arc start
// point 2 = tangent intersection
// point 3 = arc end
var index2 = (index1 + 0.5) % number_of_sides;
var index3 = (index1 + 1) % number_of_sides;
var angle1 = index1*2*Math.PI/number_of_sides;
var angle2 = index2*2*Math.PI/number_of_sides;
var angle3 = index3*2*Math.PI/number_of_sides;
var p1 = new Position(center_position.x + radius*Math.cos(angle1), center_position.y + radius*Math.sin(angle1));
var p2 = new Position(center_position.x + radius*Math.cos(angle2), center_position.y + radius*Math.sin(angle2));
var p3 = new Position(center_position.x + radius*Math.cos(angle3), center_position.y + radius*Math.sin(angle3));
var reuleaux_radius = radius*Math.sqrt(2 + 2*Math.cos(Math.PI/number_of_sides));
context.arcTo(p2.x, p2.y, p3.x, p3.y, reuleaux_radius);
}
context.closePath();
}
function draw_sharp_polygon(center_position, radius, number_of_sides)
{
if(typeof center_position == 'undefined')
throw new Error("center_position not defined");
if(typeof radius == 'undefined')
throw new Error("radius not defined");
if(typeof number_of_sides == 'undefined' || number_of_sides < 3)
throw new Error("number_of_sides not defined");
context.moveTo(center_position.x + radius, center_position.y);
var circular_angle_division = (Math.PI * 2)/number_of_sides;
for(var i = 1; i < number_of_sides; i++)
{
var x = center_position.x + radius * Math.cos(circular_angle_division * i);
var y = center_position.y + radius * Math.sin(circular_angle_division * i);
console.log(i,x,y);
context.lineTo(x,y);
}
context.closePath();
}
<canvas id="target" width="300" height="300"></canvas>
关于javascript - 在 HTML 5 Canvas 上创建 Reuleaux 多边形的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27192409/
我已经实现了 Bentley-Ottmann-algorithm检测多边形-多边形交叉点。这通常非常有效:由于多边形不自相交,因此两个多边形的线段并集中的任何线段相交表明两个多边形相交。 但是如果我看
我在 Silverlight 中有一个多边形(棋盘游戏的十六进制),例如; public class GridHex : IGridShape { ..... public IList
我创建了一个简单的 DirectX 应用程序来渲染一个顶点场。顶点呈现如下(如果从顶部查看): |\|\|\|\| |\|\|\|\| 每个三角形都是这样渲染的: 1 |\ 2 3 这应该意味着多边形
我的代码的某些部分here : var stage = new Kinetic.Stage({ container: "canvas", width: 300,
我正在尝试从 map 数据构造导航网格物体。步骤之一涉及将二进制图像(其中0表示占用空间,1表示自由空间)转换成平面直线图。 我正在尝试找到一种可靠的方法。我目前的想法是使用Canny边缘检测器,然后
我的任务是编写 MATLAB 代码来生成一个由 4 部分组成的 Logo ,如屏幕截图所示。左上角应为黑色,右下角应为白色。另一个程序应随机选择两种颜色。 我采取了以下方法: clear all cl
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
如何向 google.maps.Rectangle 和 google.maps.Polygon 添加标题? title 属性在 RectangleOptions 中不可用.我试过了,但没用(对于 go
我有一个表,用于将表上的段存储为多边形。然后我想获取所有被另一个多边形接触的线段,例如正方形或圆形。图片上:http://img.acianetmedia.com/GJ3 我将灰色小框表示为段和 bi
我正在我的网站上使用 CSS 来制作形状。它在 chrome 中运行良好,但在 mozilla、internet explorer 中打开时,它无法运行。 有人知道怎么解决吗? 这是 fiddle h
我使用 DrawingManager 在 Google map 上绘制圆形和多边形。我尝试使用下面的代码删除圆形/多边形。 selectedShape.setMap(null); 这里selected
我看到了很多如何检测碰撞的教程,但没有看到如何解决它。我正在制作一个自上而下的游戏,玩家具有圆形碰撞形状,而墙壁是各种多边形。 我正在使用 slick2d。我应该做的是,如果玩家与角落碰撞,我会按法线
我对 tkinter 比较陌生,我正在制作一个只使用正方形的游戏。我正在抄写的书只显示三角形。这是代码: # The tkinter launcher (Already complete) from
我在 OpenCV/Python 中工作,我遇到了这个问题。我已经使用 cv2.minAreaRect() 来获取围绕一组点的边界框。是否有任何其他函数/通用算法可以给我内接多边形(点集)的最大矩形?
如果给定一组线段 S ,我们能否设计一种算法来测试集合 S 中的线段是否可以形成多边形,我对它们是否相交多边形不感兴趣,我只想知道我可以测试什么标准, 任何建议 最佳答案 构建一个图形数据结构,其中节
如何从多个地理位置(经度、纬度值)创建多边形地理围栏。此外,如何在 Android 上跟踪用户进入此地理围栏区域或从该区域退出。 最佳答案 地理围栏只是一组形成多边形的纬度/经度点。获得纬度/经度点列
我想要一个 complex image like this在我的申请中。我想让用户点击复杂的多边形(在这种情况下是有边界的国家/地区)并突出显示他们点击的多边形。我有我需要用于该状态的图像。 我怎样才
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我想在 python tkinter 中移动对象,特别是多边形。问题出在 is_click 函数中。我似乎无法弄清楚如何确定我是否单击了该对象。代码还没有 100% 完成,移动仍然需要完成,但我现在需
我有一个大多边形,我想找到与该多边形相交的要素,但由于多边形太大,我遇到超时异常。 我试图研究 JTS 方法,但不知道如何使用它。 final List coordinates = List.of(n
我是一名优秀的程序员,十分优秀!