逐像素追踪六边形的边缘
Tracing the edge of a hexagon pixel by pixel
要使用HTML5画布在Javascript中创建动画,我首先需要能够描述六边形周围的逐点路径。我已经有了每个顶点的x/y坐标。我不知道我将在边缘向哪个方向移动,所以任何解决方案都应该能够在任何一个方向上工作。
六边形的半径,因此每边都是20个像素。我需要为每条边生成一组20个点,映射该路径中每个像素的x和y位置。这对于直线来说显然很容易,其中每个像素每一步增加1,而另一个轴保持静止。对于有角度的边,我无法获得绘制点所需的三角法。
我很肯定这是微不足道的,但如果能帮我理清思路,我将不胜感激。
此代码将绘制从点x1/y1到点x2/y2的等距点。
也可以反向工作(x2/y2到x1/y1)。
既然你有每个顶点的所有x/y,你应该很好!
以下是代码和Fiddle:http://jsfiddle.net/m1erickson/pW4De/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
p{font-size:24px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
DrawDottedLine(300,400,7,7,7,20,"green");
function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
var dx=x2-x1;
var dy=y2-y1;
var spaceX=dx/(dotCount-1);
var spaceY=dy/(dotCount-1);
var newX=x1;
var newY=y1;
for (var i=0;i<dotCount;i++){
drawDot(newX,newY,dotRadius,dotColor);
newX+=spaceX;
newY+=spaceY;
}
drawDot(x1,y1,3,"red");
drawDot(x2,y2,3,"red");
}
function drawDot(x,y,dotRadius,dotColor){
ctx.beginPath();
ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotColor;
ctx.fill();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=307 height=407></canvas>
</body>
</html>
您可以考虑Bresenhams线性算法。这是一个标准的goto,易于实现。。。。http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
function plotLine(p1, p2){
var dx = p2.x - p1.x;
var dy = p2.y - p2.y;
var err = 0.0;
var derr = Math.abs( dy / dx );
var y = p1.y;
for(var x = p1.x; x < p2.x; x++){
drawPoint(new Point(x,y));
err = err + derr;
if(err >= 0.5 ) {
y++;
err = err - 1.0;
}
}
}
尽管这可能是一个糟糕的方法,因为它不会被反锯齿。是实现混叠的线条绘制算法(Google it…),或者最好是使用内置于线条绘制api中的画布,只覆盖越来越长的连续线条。
相关文章:
- 下拉菜单在菜单按钮的边缘闪闪发光
- 如何在图片和边缘之间居中设置标签
- 如何使线条的边缘像素保持半透明
- Cytoscape中反映重量的边缘
- D3.js剪辑路径截断了我的图的边缘
- 微软边缘浏览器缓存中的RESTful Angular应用程序
- 即使光标位于屏幕边缘,也可以跟踪鼠标速度
- 如何使对象从画布边缘反弹
- 用于添加边缘的gremlin服务器查询
- 库存图表-添加偏移以避免在边缘绘制点
- 谷歌地图API-点击事件仅在边缘点击时触发
- 通过node.js将Visual Studio调试器附加到电子边缘应用程序
- 安卓计算器:屏幕更高,边缘更边缘
- 三.js:如何将边缘助手与网格匹配
- 在六边形网格中查找最短路径
- 如何在 CSS 动画遇到屏幕边缘时停止它
- 从边缘.js与 C# 主机通信
- 如何相对于父边框的外边缘定位元素
- 如何在边缘脚本完成后将用户定向到新页面
- 逐像素追踪六边形的边缘